Question

I have lists nested within lists like this:

<ul>
    <li><a href="#">Rings</a></li>
    <li><a href="#">Bracelets</a></li>
    <li><a href="#">Earrings</a>
        <ul>
            <li><a href="#">Diamond Earrings</a></li>
            <li><a href="#">Hoop Earrings</a></li>
            ...
        </ul>
    </li>
    <li><a href="#">Necklaces and Pendants</a>
    ...
</ul>

The lists are floated left. The nested lists are defaulted to not be displayed. So it ends up looking like this:

This so far I have. Now what I want to do is whenever a list is hovered that has a nested list (for example Earrings). I want the nested list to be revealed like so:

Notice what all is going on here, its not just telling the nested list to be displayed, that would not look right. Its putting them in a block between the first level lists where they wrap (between “Sports Jewelry” and “Charms”).

I am not sure how to go about this.

Any ideas?

Answer 1

The easiest way I think would be to create different lists, for each line. Something like the following:

<ul>
    <li><a href="#">Rings</a></li>
    <li><a href="#">Bracelets</a></li>
    <li><a href="#">Earrings</a>
        <ul>
            <li><a href="#">Diamond Earrings</a></li>
            <li><a href="#">Hoop Earrings</a></li>
            ...
        </ul>
    </li>
    <li><a href="#">Necklaces and Pendants</a>
    ...
</ul>
<ul><li><a href="#">Charms</a></li>
    <li><a href="#">Mens Jewelry</a></li>
     ....

So when you hover a li of the first line, the inner ul will be appear above the second line according to the normal flow.

To hide the inner ul, you can use the display:none as initial state, and show it using ul li:hover {display:block; }