0
我正嘗試使用CSS創建垂直菜單。當我將鼠標懸停在子菜單項上時，其一半的子菜單不顯示。請看下面的圖片：使子菜單項出現在絕對定位的div上
可能是其發生，因爲在藍色背景div和包含該菜單的股利，都被定位爲絕對的。你可以在這裏看到代碼：https://jsfiddle.net/02vc01cw/2/
請問如何讓子菜單正確顯示？ 在此先感謝。
這裏是我的代碼：
#bg {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 0;
overflow: hidden;
background-color: #437DCC;
}
#drawer {
z-index: 2;
overflow: hidden;
height: 100%;
width: 270px !important;
position: absolute;
overflow: hidden;
}
#gnavi-links > ul {
list-style-type: none;
background: #fff;
}
#gnavi-links > ul > li {
margin-bottom: 10px;
}
#gnavi-links > ul > li > a {
display: block;
height: 40px;
line-height: 40px;
color: #1a1a1a;
font-family: 'Calibre-Bold', sans-serif;
font-weight: bold;
letter-spacing: 0.25em;
text-transform: uppercase;
}
#gnavi-links > ul > li > ul {
list-style-type: none;
margin-left: -50px;
margin-right: 5px;
}
#gnavi-links > ul > li> ul > li > a {
font-size: 13px;
display: block;
padding: 5px 16px;
color: #1a1a1a;
text-decoration: none;
letter-spacing: 0.20em;
text-transform: uppercase;
}
#gnavi-links > ul > li> a:hover {
color: #19a69a;
}
#gnavi-links > ul > li> ul > li a:hover {
background-color: #5A5959;
color: #fff;
}
#gnavi-links > ul > li> ul > li ul {
display: none;
}
#gnavi-links > ul > li> ul > li:hover ul {
position: absolute;
display: block;
background: #999;
margin-left: 170px;
margin-top: -25px;
}
#gnavi-links > ul > li> ul > li > ul > li {
width: 150px;
}<div id="drawer">
<nav class="drawer-nav" id="gnavi-links" role="navigation">
<ul>
<li><a>Menu Item</a></li>
<li>
<a>Menu Item</a>
<ul>
<li><a>Sub Menu Test 1</a></li>
<li>
<a>Sub Menu Test 2</a>
<ul>
<li><a>Sub Menu Test 1</a></li>
<li><a>Sub Menu Test 2</a></li>
<li><a>Sub Menu Test 3</a></li>
</ul>
</li>
<li><a>Sub Menu Test 3</a></li>
</ul>
</li>
<li><a>Menu Item</a></li>
</ul>
</nav>
</div>
<div id="bg">
</div>