水平100％菜單但垂直子菜單項

Question

我製作了一個水平菜單，所有菜單項都佔據導航的100％。爲此，我在'lu'中使用display：table，並在'li'中顯示：table-cell。通過這種方式，菜單是水平的並將所有手工項目延伸至100％寬度。問題是子菜單也是水平的，但我希望子菜單項垂直。

<script type="text/javascript"> 
     $('body').ready(function() { 
      $('.dropdown').hover(function() { 
       $(this).find('.sub_navigation').slideToggle(); 
      }); 
     }); 
    </script> 

    ul#navigation { 
     float:left; 
     display:table; 
     margin:0; 
     padding:0; 
     width:100%; 
     font-size:15px; 
     background-color:#FFF; 
    } 

    ul#navigation li { 
     display: table-cell; 
     margin:0; 
     padding:14px 3px 14px 3px; 
     text-align:center; 
    } 

    ul.sub_navigation { 
     position:absolute; 
     display:none; 
     margin:0; 
     padding:0; 
     background-color:#FFF; 
     opacity:0.8; 
     list-style-type:none; 
    } 

    ul.sub_navigation li { 
     clear:both; 
    } 

    ul#navigation li a, 
    ul#navigation li a:active, 
    ul#navigation li a:visited { 
     color:#000000; 
     text-decoration:none; 
     display:block; 
    } 
    ul#navigation li a:hover { 
     color:#478961; 
    } 



    <ul id="navigation"> 
     <li class="dropdown"> 
      <a href="">Item 1</a> 
      <ul class="sub_navigation"> 
       <li><a href="">Sub item 1</a></li> 
       <li><a href="">Sub item 2</a></li> 
      </ul> 
     </li> 
     <li><a href="">Item 2</a></li> 
    </ul> 

什麼可以添加到sub_navigation樣式以垂直顯示子菜單項？

感謝 維克多

Answer 1

由於元素被設置爲clear:both，只需添加float:left在子導航li元素。

ul.sub_navigation li { 
    float:left; 
    clear:both; 
} 

Answer 2

這樣做沒有浮動，如果這就是你想要什麼：

ul.sub_navigation li a { 
     display: inline-block; 
    } 

http://css-tricks.com/fighting-the-space-between-inline-block-elements/