html css下拉菜单浮动,html+css下拉菜单？

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

html部分：

People

Presenter

AAA

Staff

StaffA

Student

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;

}

}