与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