如何將所有無序列表浮動到下拉div的左側？

Question

我想將我的下拉菜單（div）中的所有無序列表浮動到左側。

這是HTML：

<div class="dropdown"><li><h5><a href="#">« Back</a></h5></li> 
           <ul id="0"> 
             <li></li> 
             <li></li> 
             <li></li> 
             <li></li> 
             <li></li> 
           </ul> 
           <ul id="1"> 
             <li></li> 
             <li></li> 
             <li></li> 
             <li></li> 
             <li></li> 
           </ul> 
           <ul id="2"> 
             <li></li> 
             <li></li> 
             <li></li> 
             <li></li> 
             <li></li> 
           </ul> 
           <ul id="3"> 
             <li></li> 
             <li></li> 
             <li></li> 
             <li></li> 
             <li></li> 
           </ul> 
           <ul id="4"> 
             <li></li> 
           </ul> 
         </div> 

這是CSS：

.top-bar-section .dropdown { 
    position: absolute; 
    left: 100%; 
    top: 0; 
    visibility: hidden; 
    overflow-y: hidden; 
    overflow-x: hidden; 
    z-index: 99; } 
    .top-bar-section .dropdown ul { 
    float: left; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
    } 
    .top-bar-section .dropdown li { 
     float: left; 
     margin: 0; 
     padding: 0; 
    } 

下面

是當前外觀的圖像和所需的外觀：

Answer 1

我不不知道你爲什麼在這裏使用.top-bar-section類作爲你的標記沒有任何這樣的類。

所以我爲你做了簡單的標記和CSS。 left`它應該工作：你

這裏是CSS

.dropdown ul { 
list-style: none; 
display:inline-block; 
vertical-align:top; 
} 
.dropdown ul li { 
    display:block; 
} 

Js Fiddle Demo