简单二级导航栏的写法

简单二级导航栏的写法

二级导航栏主要就是要实现鼠标移动上去之后二级导航栏就出现的效果，现在的大部分网页都会用到这个导航栏。
HTML部分：

<div class="nav"><ul class="oneNav"><li><a href="">首页</a></li><li><a href="">购物车</a> </li><li><a href="">帮助</a></li><li><a href="">个人中心</a><ul class="twoNav"><li><a href="#">我的收藏</a></li><li><a href="#">我的足迹</a></li><li><a href="#">我的订单</a></li></ul></li></ul>
</div>

CSS部分：(此处已经省略了自己调样式的部分代码)

a {text-decoration: none;
}.twoNav li {line-height: 30px;
}.twoNav {background-color: #bdafaf;display: none;width: 65px;
}
.oneNav>li:nth-of-type(4):hover .twoNav {display: block;
}

关键点就在于先要用到display：none来隐藏二级导航栏，然后在hover状态的时候将二级导航栏的display改为block就能实现了。
效果如图：

侧边二级导航条：
HTML部分：

 <div class="sideNav"><ul><li><a href="#">城市</a><div class="threeNav"><ul><li><a href="#">武汉</a></li><li><a href="#">北京</a></li><li><a href="#">深圳</a></li></ul></div></li><li><a href="#">酒店</a><div class="fourNav"><ul><li><a href="#">高端</a></li><li><a href="#">中端</a></li><li><a href="#">经济</a></li></ul></div></li><li><a href="#">美食</a><div class="fiveNav"><ul><li><a href="#">中餐</a></li><li><a href="#">日韩</a></li><li><a href="#">西餐</a></li></ul></div></li></ul></div>

CSS部分：

.sideNav{position: relative;width: 60px;
}
.threeNav {background-color: #bdafaf;display: none;width: 65px;position: absolute;left: 100%;top: 0px;
}
.sideNav ul>li:nth-of-type(1):hover .threeNav {display: block;
}.fourNav{background-color: #bdafaf;display: none;width: 65px;position: absolute;left: 100%;top: 0px;
}
.sideNav ul>li:nth-of-type(2):hover .fourNav{display: block;
}

总结一下：尝试写简单的二级导航栏也遇到一些小问题，自己的选择器还没掌握好，分不清选的到底是哪个元素，需要多敲加深印象。