开发者社区> 问答> 正文

用html和css(scss)想建立双重下拉菜单,就是鼠标hover上一个又出来一个nav,在出来的nav上hover又出来新的nav。第一层出来了,但第二层总是覆盖内容。。好久不写了也是忘了,改了好久了。求大神解救。

html部分:

<li class="{% if page.author %}current{% endif %}">
<a href="/news/">People</a>
<div class="popup"> 
<a href="#">Presenter</a> 
<div class="popup1">
<a href="#">AAA</a>
</div>
<a href="#">Staff</a>
<div class="popup1">
<a href="#">StaffA</a>
</div> 
<a href="#">Student</a> 
</div>
</li>
scss部分:

li {
display: inline-block;
&:hover .popup{
display: block; 
&:hover .popup1{
display: block; 
}
&:hover .popup1{
display: block; 
}
}

}

.popup
{
display:none;
text-align:left;
position:absolute;
z-index:9999;
width:30em;
background-color: #333;
padding: 0.0em;
}
.popup1
{
display:none;
text-align:left;
position:absolute;
z-index:9999;
width:30em;
background-color: #333;
padding: 0.0em;
}
正常结果应该是在presenter下面是AAA,staff下面是staffA。但实际上是presenter下面是staffA,把AAA给覆盖起来了还不对。

不知道为什么问题被踩了,之前有个朋友回答了下但是又给删了,之前有些忙没有及时回复,你说的貌似是有关于class属性层次的问题?css那里面的括号层次不是很明显,但是我也注意了层次之间也没有问题啊也注意到了嵌套的问题,但是我认为这句还是有些不对,,求大家指教啊!
&:hover .popup1{
display: block;
}
&:hover .popup1{
display: block;
}
}

展开
收起
a123456678 2016-05-26 17:15:44 3533 0
1 条回答
写回答
取消 提交回答
  • I had solved problems after I looked up to the website: line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu which Tim answered. The website is great and just solved what I asked . Thanks a lot!

    I used ">" attribute in css to solve my problem and some of my origin code were wrong.

    2019-07-17 19:16:36
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
零基础CSS入门教程 立即下载
天猫 HTML5 互动技术实践 立即下载
天猫HTML5互动技术实践 立即下载