-->动态HTML教程-->4.3 使菜单初具规模

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

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