How to display nested lists like this?

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 wou开发者_Python百科ld 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?

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

You want to make your hover change the sublist from display:none to display:block.

It should be something like this:

ul li ul { display: none; }
ul li:hover ul { display: block }

That won't show at all when it's not hovered, and will add space between list items when you hover.

You probably also need to do some absolute positioning to make it appear below the hovered item, otherwise it will push the things beside it down as well.