使用div的嵌套制作有子菜单的下拉菜单
源代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>开始菜单</title> <link href="菜单样式.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="caidan" class="aa" onmouseover="fang()" onmouseout="shou()" style="overflow:hidden" >开始 <div id="nei1" class="bb1" onmouseover="fang1()" onmouseout="shou1()" style="overflow:hidden">内部1 <div id="ss1" class="cc1">里1</div> <div id="ss2" class="cc2">里2</div> <div id="ss3" class="cc3">里3</div> <div id="ss4" class="cc4">里4</div> </div> <div id="nei2" class="bb2" onmouseover="fang2()" onmouseout="shou2()" style="overflow:hidden">内部2 <div id="ss1" class="cc1">里a1</div> <div id="ss2" class="cc2">里a2</div> <div id="ss3" class="cc3">里a3</div> <div id="ss4" class="cc4">里a4</div> </div> <div id="nei3" class="bb3" onmouseover="fang3()" onmouseout="shou3()" style="overflow:hidden">内部3 <div id="ss1" class="cc1">里b1</div> <div id="ss2" class="cc2">里b2</div> <div id="ss3" class="cc3">里b3</div> <div id="ss4" class="cc4">里b4</div> </div> <div id="nei4" class="bb4" onmouseover="fang4()" onmouseout="shou4()" style="overflow:hidden">内部4 <div id="ss1" class="cc1">里c1</div> <div id="ss2" class="cc2">里c2</div> <div id="ss3" class="cc3">里c3</div> <div id="ss4" class="cc4">里c4</div> </div> </div> </body> </html> <script> function fang() { var s=document.getElementById("caidan"); s.style.overflow="visible"; } function shou() { var s=document.getElementById("caidan"); //window.setTimeout("deng()",2000); s.style.overflow="hidden"; //s.style.overflow="visible"; } function fang1() { var s=document.getElementById("nei1") s.style.overflow="visible"; } function shou1() { var s=document.getElementById("nei1") s.style.overflow="hidden"; } function fang2() { var s=document.getElementById("nei2") s.style.overflow="visible"; } function shou2() { var s=document.getElementById("nei2") s.style.overflow="hidden"; } function fang3() { var s=document.getElementById("nei3") s.style.overflow="visible"; } function shou3() { var s=document.getElementById("nei3") s.style.overflow="hidden"; } function fang4() { var s=document.getElementById("nei4") s.style.overflow="visible"; } function shou4() { var s=document.getElementById("nei4") s.style.overflow="hidden"; } function deng() { var s=document.getElementById("caidan"); s.style.overflow="hidden"; } </script>
CSS样式表
@charset "utf-8";
/* CSS Document */
.aa
{
80px;
height:40px;
background-color:#0FF;
position:absolute;
}
.bb1
{
80px;
height:40px;
background-color:#03F;
top:40px;
position:absolute;
}
.bb2
{
80px;
height:40px;
background-color:#03F;
top:80px;
position:absolute;
}
.bb3
{
80px;
height:40px;
background-color:#03F;
top:120px;
position:absolute;
}
.bb4
{
80px;
height:40px;
background-color:#03F;
top:160px;
position:absolute;
}
.cc1
{
80px;
height:40px;
background-color:#3F6;
top:0px;
left:80px;
position:absolute;
}
.cc2
{
80px;
height:40px;
background-color:#3F6;
top:40px;
left:80px;
position:absolute;
}
.cc3
{
80px;
height:40px;
background-color:#3F6;
top:80px;
left:80px;
position:absolute;
}
.cc4
{
80px;
height:40px;
background-color:#3F6;
top:120px;
left:80px;
position:absolute;
}
完成效果图
