源碼如下:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
http://www.w3.org/1999/xhtml">
JavaScript下拉菜單
*
{padding:0;
margin:0;}
body
{font-family:verdana,
sans-serif;
font-size:small;}
#navigation,
#navigation
li
ul
{list-style-type:none;}
#navigation
{margin:20px;}
#navigation
li
{float:left;text-align:center;position:relative;}
#navigation
li
a:link,
#navigation
li
a:visited
{display:block;
text-decoration:none;
color:#000;
width:120px;
height:40px;
line-height:40px;
border:1px
solid
#fff;
border-width:1px
1px
0
0;
background:#c5dbf2;
padding-left:10px;
}
#navigation
li
a:hover
{color:#fff;background:#2687eb;}
#navigation
li
ul
li
a:hover
{color:#fff;background:#6b839c;
}
#navigation
li
ul
{display:none;
position:absolute;
top:40px;left:0;margin-top:1px;width:120px;}
#navigation
li
ul
li
ul
{display:none;position:absolute;
top:0px;left:130px;
margin-top:0;margin-left:1px;width:120px;}
function
displaySubMenu(li)
{
var
subMenu
=
li.getElementsByTagName("ul")[0];
subMenu.style.display
=
"block";
}
function
hideSubMenu(li)
{
var
subMenu
=
li.getElementsByTagName("ul")[0];
subMenu.style.display
=
"none";
}
欄目1
欄目1->菜單1
欄目1->菜單2