Question

Currently my css is as follows:

#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;

The structure of my Ul and Li at the moment:

<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>

I would to have only 1 div tag therefore nested suits the way to perform such a task. The following is what I have come out with:

<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>

Another reason for doing a nest in ul is because I needed to add #topbar{width:80%}. After organsing my ul and li, I am currently stuck at the css. Can anyone give me a hand for these nested css?

Answer 1

Try nesting your list items like this:

<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>

And you can style these items specifically with the > selector

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

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

---

Working Example: http://jsfiddle.net/hunter/SySqG/