1.jQuery写法
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下拉菜单</title>
<script type="text/javascript" src="jquery-1.11.2.min.js"></script>
<style type="text/css">
*{ margin:0px; padding:0px;}
#menu{width:100px; height:35px; font-family:'微软雅黑'; background-color:#0C6; text-align:center; font-size:24px; line-height:35px; vertical-align:middle; color:#fff;}
#menu:hover{cursor:pointer;}
.menu1{width:100px; height:35px; font-family:'微软雅黑'; background-color:#FC0; text-align:center; font-size:24px; line-height:35px; vertical-align:middle; color:#fff; list-style:none; }
#menu1{margin:0px; width:100px; padding:0px; display:none;}
.menu1:hover{ cursor:pointer; background-color:#F93}
/*橘子*/
#jz{ position:absolute; left:100px; top:70px; display:none;}
.jz1{ width:100px; height:35px; background-color:#3C3; list-style:none;}
.jz1:hover{ cursor:pointer; background-color:#0F3}
/*香蕉*/
#xj{ position:absolute; left:100px; top:105px; display:none; }
.xj1{ width:100px; height:35px; background-color:#3C3; list-style:none;}
.xj1:hover{ cursor:pointer; background-color:#0F3}
/*苹果*/
#pg{ position:absolute; left:100px; top:35px; display:none; }
.pg1{ width:100px; height:35px; background-color:#3C3; list-style:none;}
.pg1:hover{ cursor:pointer; background-color:#0F3}
</style>
</head> <body>
<div id="menu" class="menu" >菜单</div>
<ul id="menu1">
<li class="menu1">苹果
<ul id="pg" class="pg">
<li class="pg1">淡绿</li>
<li class="pg1">草绿</li>
<li class="pg1">绿色</li>
</ul>
</li>
<li class="menu1">橘子
<ul id="jz" class="jz">
<li class="jz1">橘黄</li>
<li class="jz1">橘红</li>
<li class="jz1">绿色</li>
</ul>
</li>
<li class="menu1">香蕉
<ul id="xj" class="xj">
<li class="xj1">黄色</li>
<li class="xj1">柠檬黄</li>
<li class="xj1">土黄</li>
</ul>
</li>
<li class="menu1">葡萄</li>
<li class="menu1">菠萝</li>
</ul> </body>
<script type="text/jscript">
$(document).ready(function(e) { $("#menu").mouseover(function(e){
$("#menu").css("background-color","#093");
$("#menu1").css("display","block");
}); $("#menu").mouseout(function(e){
$("#menu").css("background-color","#0C6");
$("#menu1").css("display","none");
}); $(".menu1").mouseover(function(e){
$("#menu1").css("display","block");
$(this).children(".jz").css("display","block");
//(this).children(".jz"):this代表是“.menu1”这个选择器，后面的children（）代表的是".menu"下面的直接子元素
$(this).children(".xj").css("display","block");
$(this).children(".pg").css("display","block");
}); $(".menu1").mouseout(function(e){
$("#menu1").css("display","none");
$(this).children(".jz").css("display","none");
$(this).children(".xj").css("display","none");
$(this).children(".pg").css("display","none");
}); }); </script>
</html>
2.js写法:
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#fx
{
width:100px;
height:30px;
background-color:#60F;
color:white;
font-weight:bold;
text-align:center;
line-height:30px;
vertical-align:middle;
}
#fx:hover
{
cursor:pointer;
background-color:#;
}
#menu
{
width:100px;
}
.f
{
width:100px;
height:30px;
background-color:#F06;
color:white;
font-weight:bold;
text-align:center;
line-height:30px;
vertical-align:middle;
}
</style>
</head> <body>
<div id="fx" onmouseover="showlist()" onmouseout="hidelist()">分类</div>
<div id="menu" style="display:none" onmouseover="showlist()" onmouseout="hidelist()">
<div class="f">家电</div>
<div class="f">数码</div>
<div class="f">手机</div>
<div class="f">衣服</div>
</div>
</body>
<script type="text/javascript">
function showlist()
{
document.getElementById("menu").style.display="block";
}
function hidelist()
{
document.getElementById("menu").style.display="none";
}
</script>
</html>