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{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{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; 100px; padding:0px; display:none;} .menu1:hover{ cursor:pointer; background-color:#F93} /*橘子*/ #jz{ position:absolute; left:100px; top:70px; display:none;} .jz1{ 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{ 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{ 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 { 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:#639; } #menu { 100px; } .f { 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>