横竖列表 下拉隐藏显示
<style type="text/css"> *{ margin:0px auto; padding:0px} #menu{width:150px; height:300px; position:fixed; left:100px; top:200px} .yiji{ width:150px; height:35px; background-color:#63C; border:1px solid white; text-align:center; line-height:35px; vertical-align:middle; color:white; font-weight:bold} #erji1{ width:150px; display:none} .xiang21{width:150px; height:35px; background-color:#F96; border:1px solid white; text-align:center; line-height:35px; vertical-align:middle; color:white; font-weight:bold} #erji2{ width:150px; display:none} .xiang22{width:150px; height:35px; background-color:#F96; border:1px solid white; text-align:center; line-height:35px; vertical-align:middle; color:white; font-weight:bold} #erji3{ width:150px; display:none} .xiang23{width:150px; height:35px; background-color:#F96; border:1px solid white; text-align:center; line-height:35px; vertical-align:middle; color:white; font-weight:bold} #heng{ width:700px; height:36px; border:1px solid #60F;} .list{ float:left; width:100px; height:36px; text-align:center; line-height:36px; vertical-align:middle; font-weight:bold} .list:hover{ cursor:pointer; background-color:#63F; color:white;} #ej1{ width:100px; height:100px; position:relative; top:36px; left:-100px; background-color:#06C; display:none} #ej2{width:100px; height:100px; position:relative; top:36px; left:-100px; background-color:#9C3;display:none} #ej3{width:100px; height:100px; position:relative; top:36px; left:-100px; background-color:#F33;display:none} #ej4{width:100px; height:100px; position:relative; top:36px; left:-100px; background-color:#696;display:none} #ej5{width:100px; height:100px; position:relative; top:36px; left:-100px; background-color:#FF3;display:none} </style> </head> <body> <div id="menu"> <div class="yiji" onclick="showa('erji1')"> 首页 </div> <div id="erji1"> <div class="xiang21">首页1</div> <div class="xiang21">首页2</div> <div class="xiang21">首页3</div> </div> <div class="yiji" onclick="showa('erji2')"> 产品中心 </div> <div id="erji2"> <div class="xiang22">产品1</div> <div class="xiang22">产品2</div> <div class="xiang22">产品3</div> </div> <div class="yiji" onclick="showa('erji3')"> 活动中心 </div> <div id="erji3"> <div class="xiang23">活动1</div> <div class="xiang23">活动2</div> <div class="xiang23">活动3</div> </div> </div> <br /> <div id="heng"> <div class="list" onmouseover="showc('ej1')" onmouseout="hidec('ej1')">首页</div> <div style="float:left; width:0px"> <div id="ej1"></div> </div> <div class="list" onmouseover="showc('ej2')" onmouseout="hidec('ej2')">产品中心</div> <div style="float:left;width:0px"> <div id="ej2"></div> </div> <div class="list" onmouseover="showc('ej3')" onmouseout="hidec('ej3')">活动中心</div> <div style="float:left;width:0px"> <div id="ej3"></div> </div> <div class="list" onmouseover="showc('ej4')" onmouseout="hidec('ej4')">新闻中心</div> <div style="float:left;width:0px"> <div id="ej4"></div> </div> <div class="list" onmouseover="showc('ej5')" onmouseout="hidec('ej5')">联系我们</div> <div style="float:left;width:0px"> <div id="ej5"></div> </div> </div> <script type="text/javascript"> function showa(d) { //找对应的二级菜单 var ej = document.getElementById(d); if(ej.style.display=="block") { ej.style.display="none"; } else { ej.style.display = "block"; } } function showc(d) { var ej = document.getElementById(d); ej.style.display="block"; } function hidec(d) { var ej = document.getElementById(d); ej.style.display="none"; } </script> </body>