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

<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>