前端工程日记 ２５日 Flex 并排选单

附codepen网址：
https://codepen.io/pwbzvqja/pen/GRWNVYB

html

<ul class="menu">
    <li><a href="">首页</a></li>
    <li><a href="">政治</a></li>
    <li><a href="">论坛</a></li>
    <li><a href="">财经</a></li>
    <li><a href="">娱乐</a></li>
    <li><a href="">运动</a></li>
</ul>

css:

    
    .menu{
    width: 600px;
    margin: 0 auto;
    display:flex;

}
.li{
    background: #000;

}

.menu li{
width: 100px;
text-align: center;
border: 1px solid #0000;
    
}

.menu li a{
    display: block;
    background: #00ffa2;
    padding-top: 10px;
    padding-bottom: 10px;
    text-decoration:none;
    color:#004466;
    }
.menu li a:hover{
    background:#004466;
    color:#00ffa2;
}
     
     ```