與css一行的子菜單

Question

我想使導航菜單像上圖一樣懸停在菜單上。這是我的導航菜單的示例代碼。

<div id="menu"> 
    <ul> 
    <li>Menu1 
     <ul class="submenu"> 
     <li>Menu1Sub1</li> 
     <li>Menu1Sub2</li> 
     <li>Menu1Sub3</li> 
     <li>Menu1Sub4</li> 
     </ul> 
    </li> 
    <li>Menu2 
     <ul class="submenu"> 
     <li>Menu2Sub1</li> 
     <li>Menu2Sub2</li> 
     <li>Menu2Sub3</li> 
     </ul> 
    </li> 
    ... 
    </ul> 
</div> 

子菜單位置在一行中，如果可能的話，我也希望每個菜單的子菜單位置完全相同。

如何用css做到這一點？

這是我到目前爲止嘗試不按我的意圖工作。

#menu { 
     text-decoration:none; 
} 
#menu li { 
     line-height:20px; 
     float:left; 
} 
#menu li > ul { 
     display: none; 
} 
#menu li:hover > ul { 
     display: block; 
} 
#menu li ul li { 
     line-height:13px; 
     float:left; 
     position:relative; 
} 

任何幫助將不勝感激。

Answer 1

試試這個代碼：

#menu { 
    position: relative; 
    background-color: black; 
     text-decoration:none; 
} 

#menu li { 
    background-color: green; 
    padding: 10px; 
    height: 30px; 
    list-style: none; 
    line-height:30px; 
    float:left; 
} 

#menu li > ul { 
    display: none; 
} 

#menu > ul > li { 
    border: 2px solid white; 
} 

#menu > ul > li:hover { 
    border: 2px solid black; 
} 

#menu li:hover > ul { 
    display: block; 
    position: absolute; 
    top: 54px; 
    left: 0; 
} 

#menu li ul li { 
    float:left; 
    position:relative; 
} 

DEMO jsfiddle