05.09.2008, 14:40
<div id="menu"> <ul id="item1"> <li class="top">menu item</li> <li class="item"><a href="#">menu item 1</a></li> <li class="item"><a href="#">menu item 2</a></li> <li class="item"><a href="#">menu item 3</a></li> </ul> </div>
You’ll see the parent item is marked with top, while the rest are marked item. Now I can get to hiding .item and letting .top continue to show. So I’ll add this to the style sheet.
#menu ul .item{display:none;}
And when I hover over the top of the unordered list, I want all list items with class item to appear again. Here’s what I’ll add to the style sheet.
#menu ul:hover .item{display:block;}
You could choose to use display:block or display:inline. The last important piece is the position of the menu.
#menu{position:absolute;}
You’ll see the parent item is marked with top, while the rest are marked item. Now I can get to hiding .item and letting .top continue to show. So I’ll add this to the style sheet.
#menu ul .item{display:none;}
And when I hover over the top of the unordered list, I want all list items with class item to appear again. Here’s what I’ll add to the style sheet.
#menu ul:hover .item{display:block;}
You could choose to use display:block or display:inline. The last important piece is the position of the menu.
#menu{position:absolute;}