React Web Structure Test3

import styled from "styled-components";

const StyledMenu = styled.div`
height:100px;
padding:5px 20px;
`;
const StyledUl = styled.ul`
    list-style:none;
    margin:0;
    padding:1% 8%;
`;
const StyledLi = styled.li`
    margin: 5px;
    padding: 15px;
    width: 100px;
    border : 0;
    background : white;
    color: black;
    float: left;
    font-weight:bold;
    cursor: pointer;

    box-shadow: inset 0 0 0 0 black;
    transition: color .3s ease-in-out, box-shadow .3s ease-in-out;    

    &:hover{  
        box-shadow: inset 110px 0 0 0 black;
        color: white;
    }    
`;

const Menu = (props) => {
    return(
        <>
        <StyledMenu>
            <StyledUl>
                {props.list.map((item, index) => {
                    return(
                        <>
                        <StyledLi key={index} onClick={() => props.switch_page(index)}>{item.title}</StyledLi>
                        </>
                    )
                })}
            </StyledUl>
        </StyledMenu>
        </>
    )
}

export default Menu;