如何獲得垂直子菜單而不是水平子菜單？

Question

我開發了CSS & jQuery的子菜單，我的意圖是它是垂直子菜單，但我得到一個水平菜單。

我已經嘗試在CSS中顯示「播放」，但它不起作用，如#menu ul li ul li a {display: inline-block;}。

任何人都知道把這個子菜單垂直的技巧？

我的jsfiddle全例如：

http://jsfiddle.net/jcak/9EcnL/7/

我的HTML：

<section id="menu-container"> 

    <nav id="menu"> 
     <ul>  
      <li><a href="index.html">Home</a> 
       <ul> 
        <li><a href="#">Link 1</a></li> 
        <li><a href="#">Link 2</a></li> 
        <li><a href="#">Link 3</a></li> 
        <li><a href="#">Link 4</a></li> 
       </ul> 
      </li> 
      <li><a href="procuts.html">Procuts</a> 
       <ul> 
        <li><a href="#">Link 1</a></li> 
        <li><a href="#">Link 2</a></li> 
        <li><a href="#">Link 3</a></li> 
        <li><a href="#">Link 4</a></li> 
       </ul> 
      </li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contacts</a></li> 
     </ul> 
    </nav> 
</section> 

我的CSS：

#menu ul li ul li {display: none;} 

#menu-container 
{ 

    background:green; 
    width:100%; 
    height:46px; 
    float:left; 
    z-index:7; 
} 

#menu 
{ 
    width:960px; 
    height:auto; 
    margin:0 auto 0 auto; 
} 

#menu ul 
{ 
    list-style-type:none; 
} 

#menu ul li 
{ 
    display: inline-block; 
    float:left; 
    height:46px; 
    position: relative; 
    line-height:46px; 
    font-weight:300; 

} 

#menu ul li a 
{ 
    text-decoration:none; 
    color:#ccc; 
    display:block; 
    margin-right:5px; 
    height:46px; 
    line-height:46px; 
    padding:0 5px 0 5px; 
    font-size:20px; 

} 

#menu ul li a:hover 
{ 
    color:#fff; 
} 
#menu ul li ul { 
    position: absolute; 
    left: 0; 
    -webkit-padding-start: 0; 
    width: 300px; 
} 
#menu ul li ul li 
{ 
    color:#fff; 

} 

Answer 1

默認情況下，ul將是垂直的。 float:left是使整個菜單變爲水平的原因。

請務必刪除該菜單並查看菜單的行爲。

Answer 2

Working Fiddle

#menu ul li 
{ 
    display: inline-block; 
    height:46px; 
    position: relative; 
    line-height:46px; 
    font-weight:300; 
}