当前位置： 移动技术网 > IT编程>网页制作>CSS > css导航菜单二级显示的问题

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

2020年07月14日  | 移动技术网IT编程  | 我要评论

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

复制代码

本文地址：https://blog.csdn.net/qq_28628245/article/details/107305132

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网