顯示內聯li項左浮動

Question

我想有一個懸停框在我的清單上，以便他們可以並排顯示字母。 這個link顯示了一個例子，只要我把鼠標光標放在單詞「title」上，我就會有A，B，C和更多的並排。

我如何通過調整CSS來實現這一目標？

截至目前，我只能以垂直順序顯示A，B，C。 CSS截至目前：

#topbar{ 
    width: 80%; 
    list-style-type: none; 
} 
#topbar > li:hover ul { display: inline;} 

#topbar > li { 
     float: left; 
     margin-left: 20px; 
     margin-right: 20px; 
     font-family:"Georgia"; 
} 
#topbar > li > ul { 
     float:left; 
     display: none; 
     top:32px; 
     position: absolute; border-style:solid; padding-left:10px; padding-right:10px; 
     border-width:1px; background-color:white;list-style-type: none;}  
} 

和我UL和李代碼：

<ul id="topbar"> 
    <li> <a href="#">Title</a> 
     <ul> 
      <li><a href="#">A</a></li> 
      <li><a href="#">B</a></li> 
      <li><a href="#">C</a></li> 
      <li><a href="#">D</a></li> 
      <li><a href="#">E</a></li> 
      <li><a href="#">F</a></li> 
      <li><a href="#">G</a></li> 
      <li><a href="#">H</a></li> 
      ,,, 
     </ul> 
    </li> 
    <li> <a href="#">Type</a> 
     <ul> 
      <li><a href="#">A</a></li> 
      <li><a href="#">B</a></li> 
     </ul> 
    </li> 
    <li> <a href="#">Format</a> 
     <ul> 
      <li><a href="#">A</a></li> 
      <li><a href="#">B</a></li> 
     </ul> 
    </li> 
</ul> 

Answer 1

要獲得A - Z名單浮動只剩添加此規則：

#topbar > li > ul li { 
    float:left; 
    margin:0 5px; // Or whatever margin you want 
} 

http://jsfiddle.net/tcwsb/3/

CSS代碼的末尾有一個額外的大括號，如果您嘗試使用t代碼，可能會導致問題Ø添加任何規則之下，去年一個

Answer 2

這是你需要的CSS：

#topbar { list-style:none; width: 80%; } 
#topbar > li { 
    display:inline-block; 
    *display:inline; 
    position:relative; 
} 
#topbar > li > a { padding:1em 20px; } 

#topbar li ul { 
    display:none; 
    position:absolute; 
    top:2em; 
    left:20px; 
    padding:5px; 
    background:white; 
    border:1px solid black; 
} 

#topbar li ul li { 
    display:inline-block; 
    *display:inline; 
} 

#topbar > li:hover ul { display:block } 

這裏的工作演示：http://jsfiddle.net/rfn9S/