['B n S']

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