菜单下拉 的问题？

用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;
 }
 }