m项目中出现了二级菜单的标签是在导航的里面,用css
ul>li:hover ul>li>ul>li
这样子实现不了鼠标经过时导航里二级菜单的显示，这里个人感觉是冲突了。最后通过在二级菜单添加类名“nar”
.nav>ul>li:hover .nar{ display: block; background-color: salmon; }
这才实现了这个效果
完成后的css片段代码
.nav{ width: 1180px; height:44px; line-height: 44px; background:-webkit-linear-gradient(left,#034DA4,#7B99DA,#034DA4); margin: 0 auto; position: relative; z-index: 29; } .nav>ul>li{ float: left; } .nav>ul>li>a{ display: block; width: 118px; text-align: center; font-size: 14px; font-weight: bold; color: #fff; } .nav>ul>li>ul{ position: absolute; z-index: 8; display: none; } .nav>ul>li:hover .nar{ display: block; background-color: salmon; }
html代码:
<ul class="nav"> <li> <a href="">首页</a> </li> <li> <a href="">概况</a> <ul class="nar"> <li><a href="#">学校</a></li> <li><a href="#">机构</a></li> <li><a href="#">校务</a></li> <li><a href="#">荣誉</a></li> </ul> </li> </ul>