css - 如何将当前的 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;

目前我的Ul和Li的结构:

<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{width: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/