css导航菜单二级显示的问题

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代码:

复制代码

• 首页
• 概况
  • 学校
  • 机构
  • 校务
  • 荣誉