下拉菜单的编辑 - 绯色梧桐绯色月

使用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
{
    width:80px;
    height:40px;
    background-color:#0FF;
    
    position:absolute;
}
.bb1
{
    width:80px;
    height:40px;
    background-color:#03F;
    top:40px;
    position:absolute;
}
.bb2
{
    width:80px;
    height:40px;
    background-color:#03F;
    top:80px;
    position:absolute;
}
.bb3
{
    width:80px;
    height:40px;
    background-color:#03F;
    top:120px;
    position:absolute;
}
.bb4
{
    width:80px;
    height:40px;
    background-color:#03F;
    top:160px;
    position:absolute;
}

.cc1
{
    width:80px;
    height:40px;
    background-color:#3F6;
    top:0px;
    left:80px;
    position:absolute;
}
.cc2
{
    width:80px;
    height:40px;
    background-color:#3F6;
    top:40px;
    left:80px;
    position:absolute;
}
.cc3
{
    width:80px;
    height:40px;
    background-color:#3F6;
    top:80px;
    left:80px;
    position:absolute;
}
.cc4
{
    width:80px;
    height:40px;
    background-color:#3F6;
    top:120px;
    left:80px;
    position:absolute;
}

完成效果图

posted on 2016-07-14 11:18 绯色梧桐绯色月阅读(184) 评论(0) 编辑收藏举报

刷新页面返回顶部