水平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/