下面我们插入一个菜单目录。我们将标题设置为
"Webmonkey" 。

<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"> 
Webmonkey </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仍然在页面中，但浏览器不将它显示出来。>>