1.子菜单下拉
<!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> <style type="text/css"> *{ margin:0px auto; padding:0px} #menu{ width:700px; height:40px; border:1px solid #999; margin-top:30px} .list{ width:100px; height:40px; text-align:center; line-height:40px; vertical-align:middle; font-size:16px; font-family:微软雅黑; float:left} .list:hover{ cursor:pointer; background-color:#63C; color:white} .ziwai{width:0px; height:0px;position:relative; float:left; top:40px; left:-100px} .zi{ width:100px; height:100px; background-color:#6C3; display:none } </style> </head> <body> <div id="menu"> <div class='list' onmouseover="Show('z1')" onmouseout="YinCang()">首页</div> <div class="ziwai" > <div class="zi" id="z1"></div> </div> <div class='list' onmouseover="Show('z2')" onmouseout="YinCang()">产品介绍</div> <div class="ziwai" > <div class="zi" id="z2"></div> </div> <div class='list' onmouseover="Show('z3')" onmouseout="YinCang()">公司简介</div> <div class="ziwai" > <div class="zi" id="z3"></div> </div> <div class='list' onmouseover="Show('z4')" onmouseout="YinCang()">联系我们</div> <div class="ziwai" > <div class="zi" id="z4"></div> </div> <div class='list' onmouseover="Show('z5')" onmouseout="YinCang()">新闻动态</div> <div class="ziwai" > <div class="zi" id="z5"></div> </div> </div> </body> <script type="text/javascript"> function Show(id) { //让所有的子菜单隐藏 var attr = document.getElementsByClassName("zi"); for(var i=0; i<attr.length;i++) { attr[i].style.display = "none"; } //让和该菜单关联的子菜单显示 document.getElementById(id).style.display = "block"; } function YinCang() { var attr = document.getElementsByClassName("zi"); for(var i=0; i<attr.length;i++) { attr[i].style.display = "none"; } } </script> </html>
2.DIV做下拉列表
<head> <style type="text/css"> *{ margin:0px auto; padding:0px} #xiala{ width:180px; height:33px; border:1px solid #999;text-align:center; line-height:33px; vertical-align:middle; } #xiala:hover{ cursor:pointer} #zi{width:180px; height:150px; border:1px solid #63C; border-top:0px; display:none} .list{width:180px; height:33px; text-align:center; line-height:33px; vertical-align:middle; border-bottom:1px solid #63C; background-color:#CCC} .list:hover{ cursor:pointer; background-color:#63C; color:white} </style> </head> <body> <div style="700px; height:500px; margin-top:30px"> <div id="xiala" onclick="Show()"></div> <div id="zi"> <div class="list" onclick="Xuan(this)">山东</div> <div class="list" onclick="Xuan(this)">淄博</div> <div class="list" onclick="Xuan(this)">张店</div> </div> </div> </body> <script type="text/javascript"> function Show() { document.getElementById("zi").style.display="block"; } function Xuan(ys) { var v = ys.innerText; document.getElementById("xiala").innerText = v; document.getElementById("zi").style.display="none"; } </script> </html>