我該如何將當前的css，ul和li更改爲嵌套結構？

Question

目前我的CSS如下：

#topbar:hover ul{ display: inline;} 

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

我的UI和李此刻的結構：

<div id="topbar"> 
    Title 
    <ul> 
     <li><a href="#">A</a></li> 
     <li><a href="#">B</a></li> 
    </ul> 
</div> 

<div id="topbar"> 
    Type 

    <ul> 
     <li><a href="#">A</a></li> 
     <li><a href="#">B</a></li> 
    </ul> 
</div> 

<div id="topbar"> 
    Format 

    <ul> 
     <li><a href="#">A</a></li> 
     <li><a href="#">B</a></li> 
    </ul> 
</div> 

我想有隻1個 div標籤，因此嵌套西服方式執行這樣的任務。以下是我已經拿出：

<div id="topbar"> 
    <ul> 
    <li> Title 
    <ul> 
     <li><a href="#">A</a></li> 
     <li><a href="#">B</a></li> 
    </ul> 
    </li> 
    <li> Type 
    <ul> 
     <li><a href="#">A</a></li> 
     <li><a href="#">B</a></li> 
    </ul> 
    </li> 
    <li> Format 
    <ul> 
     <li><a href="#">A</a></li> 
     <li><a href="#">B</a></li> 
    </ul> 
    </li> 
    </ul> 
</div> 

另一個原因UL做窩是因爲我需要添加#topbar {寬度：80％}。在發現我的ul和li後，我目前被困在css中。任何人都可以爲我提供這些嵌套的CSS的手？

Answer 1

嘗試嵌套列表項是這樣的：

<ul id="topbar"> 
    <li>Title 
     <ul> 
      <li><a href="#">A</a></li> 
      <li><a href="#">B</a></li> 
     </ul> 
    </li> 
    <li>Type 
     <ul> 
      <li><a href="#">A</a></li> 
      <li><a href="#">B</a></li> 
     </ul> 
    </li> 
    <li>Format 
     <ul> 
      <li><a href="#">A</a></li> 
      <li><a href="#">B</a></li> 
     </ul> 
    </li> 
</ul> 

而且你可以用>選擇具體樣式，這些項目

#topbar > li { 
    /* Title, Type, Format */ 
} 

#topbar > li > ul { 
    /* sub menus */ 
} 

---

工作實例：http://jsfiddle.net/hunter/SySqG/

Answer 2

看起來像你j你需要在樣式中添加幾個ul和li。

#topbar ul li { 
    float: left; 
    margin-left: 20px; 
    margin-right: 20px; 
    font-family:"Georgia"; } 

#topbar ul li:hover ul{ display: inline;} 

#topbar ul li ul{ 
    display: none; 
    top:30px; 
    position: absolute; border-style:solid; padding-left:10px; 
    padding-right:10px; 
    border-width:1px; background-color:white;list-style-type: none;}  

.clear { 
    clear: both; } 

實施例：http://jsfiddle.net/Xt4jR/1/