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?
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"> </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.
