纯html+css+js写的导航菜单

1.页面上展示一个ul

 <ul id="bigUl">
               <li onclick="clickHandel(this)">淘宝网首页
                <span id="rowed" onmouseover="erji()">></span>
            </li>
               <li onclick="clickHandel(this)">我的淘宝</li>
               <li onclick="clickHandel(this)">收藏夹</li>
               <li onclick="clickHandel(this)">商品分类</li>
               <li onclick="clickHandel(this)">卖家中心</li>
               <li onclick="clickHandel(this)">网站导航</li>
           </ul>

2.修改样式，用弹性盒模型将li平分

#bigUl {
            display: flex;
        }
        #bigUl li {
            flex: 1;
            list-style-type: none;
            line-height: 50px;
            text-align: center;
            cursor: pointer;
            border-right: 1px solid #fff;
        }
        #bigUl li:hover {
            background-color: rgb(21, 72, 241);
            color: #fff;
        }
       #rowed {
           /* 需要是盒模型才能旋转 */
           display: inline-block;
           transform: rotate(90deg);
           margin-left: 10px;
        }
        #rowed:hover{
           /* 需要是盒模型才能旋转 */
           color: red;
        }

3.js中鼠标滑过或者点击某个li的时候，动态修改当前li的样式以及其他li的样式

function clickHandel(obj) {
        var oDiv = document.getElementsByTagName("#bigUl li")
           for(var i = 0;i<oDiv.length;i++) {
              oDiv[i].style.backgroundColor = 'aqua';
              oDiv[i].style.color = '#000';
              obj.style.backgroundColor = 'rgb(21, 72, 241)';
              obj.style.color = '#fff'
           }
        }

4.结果