CSS / JQuery Horizontal menu with 2 line

Question

a busy cat http://i61.tinypic.com/2nu3ok3.jpg

I created a menu with jquery: div 1 for a main menu and div 2 for the submenu. When you hover the mouse over the item, the div 2 appears under the selected menu.

Can I make a menu more optimized?

Can you make a CSS menu on 2 lines with the function described in the image?

<div id="main-menu">
    <ul>
        <li><a href="#" class="category" rel="">Home</a></li>
        <li><a href="#" class="category" rel="submenu1">test</a></li>
    </ul>
</div>

<div id="menu-wrap">
    <div id="menu">
        <div id="submenu1" class="submenu">
            <ul>
                <li><a href="#">sub menu 1</a></li>
                <li><a href="#">sub menu 2</a></li>
            </ul>
        </div>
    </div>
</div>

is possible to realize the menu without the use of jquery but only CSS?

Answer 1

In order for this to work, the sub-menus will need to be nested (in the DOM) inside of their main-menu entries. We'll need to modify the HTML markup using lists.

A description of the code: we'll create a container for the whole thing, and float that right. After the container, we'll have a div that simply clears the float, so the rest of the page displays properly. Inside of the container, we'll have an unordered list for the main menu -- each list item will contain a link and an unordered list for the submenus. Those submenu lists will initially be display:none. We'll have to position the submenus absolutely, so that they appear below below the main menu instead of in the middle. Then the magic happens using the :hover pseudo selector, and a nested selection: when a main-menu list item is hovered, it's child ul tag will be set to display:block.

HTML changes:

<div id="menu-container">
    <ul id="main-menu">
        <li> <a href="#">Home</a> </li>
        <li> <a href="#">Menu Item 1</a>
            <ul class="submenu">
                <li><a href="#">Submenu 1 Item 1</a></li>
                <li><a href="#">Submenu 1 Item 2</a></li>
            </ul>
        </li>
        <li> <a href="#">Menu Item 2</a>
            <ul class="submenu">
                <li><a href="#">Submenu 2 Item 1</a></li>
                <li><a href="#">Submenu 2 Item 2</a></li>
            </ul>
        </li>
        <li> <a href="#">Menu Item 3</a>
            <ul class="submenu">
                <li><a href="#">Submenu 3 Item 1</a></li>
                <li><a href="#">Submenu 3 Item 2</a></li>
            </ul>
        </li>
    </ul>
</div>

<div class="clear">&nbsp;</div>

And the accompanying CSS:

#menu-container {
    float:right;
}
#main-menu {
    text-align:right;
    position:relative;
}
.submenu {
    position:absolute;
    left:0;
    top:1em;
    width:100%;
    text-align:center;
    display:none;
}
#main-menu, .submenu {
    list-style:none;
}
#main-menu li, .submenu li {
    display:inline;
}
#main-menu li:hover ul {
    display:block;
}
.clear {
    clear:both;
}

See the live demo here.

This may need some tweaking to support legacy browsers, if that is a requirement. Some code (for hover effect) was sourced from the A List Apart Suckerfish CSS Dropdown Menu.