下拉菜單相對定位在主菜單項之間留下間隙

Question

我一直在搜索遍佈整個stackoverflow，但沒有找到類似的東西。

我有一個垂直（正常）菜單，有一個子菜單，我想要在主菜單的右邊，而不會在後面的菜單項之間留下空隙。

DEMO：http://jsfiddle.net/pzyLR/

HTML

<ul class="sidemenu"> 
<li><a href="">Home</a></li>   
<li><a href="">History</a> 
    <ul> 
     <li><a href="">1st page</a></li> 
     <li><a href="">2nd page</a></li> 
     <li><a href="">3rd page</a></li> 
     <li><a href="">4th page</a></li> 
    </ul> 
</li> 
<li><a href="">A-Z index</a></li> 
<li><a href="">Contact</a></li> 
</ul> 

CSS

ul.sidemenu { 
list-style-type:none; 
padding:10px 0px; 
margin:0; 
text-align:center; 
} 

ul.sidemenu li { 
margin:5px 0px; 
} 

ul.sidemenu li a { 
display:block; 
line-height:20px; 
padding:10px 0px; 
width:200px; 
background-color: rgba(28,28,28, 0.16); 
font-family:arial; 
font-size:1.4em; 
text-transform:uppercase; 
color:#1c1c1c; 
text-decoration:none; 
} 

/*dropdown menu*/ 

ul.sidemenu li ul { 
display:none; 
list-style-type:none; 
} 

ul.sidemenu li:hover > ul { 
display:block; 
width:120px; 
position:relative; left:20%; top:-45px; 
} 

正如你可以在演示中看到下拉菜單確實位置正確強硬它仍然留下一個巨大的白色空間它如果也有。

有什麼建議嗎？我已經嘗試過絕對定位，但是當我調整瀏覽器窗口大小時，它會走出它想要的位置。

感謝，

Answer 1

添加position:absolute先UL和第二UL。然後是位置與元素左側，頂部，底部值

UPDATED JSFIDDLE DEMO

修訂CSS

ul.sidemenu { 
    list-style-type:none; 
    padding:10px 0px; 
    margin:0; 
    text-align:center; 
    position:absolute; 
} 

ul.sidemenu li { 
    margin:5px 0px; 
} 

ul.sidemenu li a { 
    display:block; 
    line-height:20px; 
    padding:10px 0px; 
    width:200px; 
    background-color: rgba(28,28,28, 0.16); 
    font-family:arial; 
    font-size:1.4em; 
    text-transform:uppercase; 
    color:#1c1c1c; 
    text-decoration:none; 
} 

/*dropdown menu*/ 

ul.sidemenu li ul { 
    display:none; 
    list-style-type:none; 
} 

ul.sidemenu li:hover > ul { 
    display:block; 
    width:120px; 
    position:absolute; 
    left:82%; 
    top:27%; 
} 

新增position:absolute;到ul.sidemenu。

2.在ul.sidemenu li:hover > ul更改position:relative;到position:absolute;和在相同也改變的lefttop和值。

Answer 2

您可以創建兩個div：在第一，你可以把你的主菜單中，排在第二的子菜單。因此，請嘗試在一個div中插入子菜單<ul>元素，然後在另一個div中插入您的<ul>。現在，如果您將鼠標懸停在主菜單li元素上，則在div的右側可以顯示您的子菜單。

簡單的例子：

<div> 
    <ul class='mainmenu'>....</ul> 
</div> 
<div> 
    <ul class='submenu'>....</ul> 
</div>