<style type="text/css">



#menuBar {position: absolute;



left: 0;
top: 0;
width: 100%;
height: 22px;
border: 1px solid #99ffff;
background-color: #99ffff;
layer-background-color: #99ffff;
}



.daMenu {position: absolute;



width: 100px;
height: 22px;
border: 1px solid #99ffff;
top: 0px
}



</style>



...






<div id="menuBar"> </div>
<div id="webmonkey" class="daMenu">
Menuitem </div>  

 显示结果如下：

下面在webmonkey菜单项下加入子菜单：
　

<style>



.moreMenu {position: absolute;



width: 100px;



border: 1px solid red;



background-color: red;



layer-background-color: red;



top: 22px;



}



</style>









...









<div id="moreMonkey" class="moreMenu"> Aaron



<br> Captain Cursor



<br> Cassandra



<br> Chris



<br> Courtney



<br> Jeff



<br> Joanne



<br> Jean Pierre



<br> Klug



<br> Kristin



<br> Nadav



<br> Taylor



<br> Thau



<br> Tim



<br> Wendy



<br>



</div> 

同其他菜单项结合后显示结果如下：
　

下面我们为菜单项设定功能。首先要做的是选择moreMenu类，并将其隐藏。因为通常情况下，如果你不点击菜单项，它不会显示子菜单目录。所以，你应该加入下面的代码：
　

.moreMenu {position: absolute;



width: 100px;



border: 1px solid red;



background-color: red;



layer-background-color: red;



visibility: hidden;



top: 22px;



}

现在这个DIV仍然在页面中，但浏览器不将它显示出来。