Горизонтальное меню 100%, но вертикальное подменю

Question

Я сделал горизонтальное меню, в котором все пункты меню принимают 100% навигатора. Для этого я использую display: table в 'lu' и покажу: table-cell в 'li'. Таким образом, меню горизонтально и расширяет все элементы manu до 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 к литиево элементов в subnavigation.

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/