|
下面我们插入一个菜单目录。我们将标题设置为
"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
下面在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>
同其他菜单项结合后显示结果如下：
Webmonkey
Aaron
Captain Cursor
Cassandra
Chris
Courtney
Jeff
Joanne
Jean Pierre
Klug
Kristin
Nadav
Taylor
Thau
Tim
Wendy
下面我们为菜单项设定功能。首先要做的是选择moreMenu
类，并将其隐藏。因为通常情况下，如果你不点击菜单项，
它不会显示子菜单目录。所以，你应该加入下面的代码：
.moreMenu {position: absolute;
width: 100px;
border: 1px solid red;
background-color: red;
layer-background-color: red;
visibility: hidden;
top: 22px;
}
现在这个DIV仍然在页面中，但浏览器不将它显示出来。
|
