js+css二级菜单制作方法
来源:互联网 发布:牛梦源码社区 编辑:程序博客网 时间:2024/04/30 21:40
<!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><script>//alert("二级菜单");function ad(re){var wq = document.getElementById("qqs").getElementsByTagName("ul")if(re==1){wq(0).style.display="block";wq(1).style.display="none";wq(2).style.display="none";}else if(re==2){wq(1).style.display="block";wq(0).style.display="none";wq(2).style.display="none";}else if(re==3){wq(2).style.display="block";wq(1).style.display="none";wq(0).style.display="none";}}function dda(){var wq = document.getElementById("qqs").getElementsByTagName("ul")wq(2).style.display="none";wq(1).style.display="none";wq(0).style.display="none";}</script></head><body style="padding:0 0 0 50px; margin:0px; width:980px;"><style>a{color:#FFF; text-decoration:none; display:block;}#aqq li:hover{background:#F00; color:#FFF;}li:hover{background:#F00; color:#000;}ul{list-style:none; padding:0px; margin:0px;}#aqq li{float:left; width:80px; height:25px; background:#CCC; text-align:center; line-height:25px; border:#000 1px solid;}#qqs{clear:both;}#qqs ul{float:left; width:80px; background:#930; color:#FFF; display:none;}#qqs li{border:#FF0 1px solid; widows:80px; text-align:center; height:15px; line-height:15px;} </style><h4 id="aqq" > <ul >
<li onmouseover="ad(1);" >菜单一</li> <li onmouseover="ad(2);">菜单二</li> <li onmouseover="ad(3);">菜单三</li> <li>菜单四</li> <li>菜单五</li> <li>菜单六</li>
</ul></h4><div id="qqs" > <ul id="qqs1"> <li>1</li> <li>2</li> <li>3</li> <li>4</li>
<li>5</li> </ul> <ul id="qqs2" style=" position:relative; left:83px;"> <li>一</li> <li>二</li> <li>三</li> <li>四</li>
<li>五</li> </ul> <ul id="qqs2" style=" position:relative; left:+165px;" > <li>壹</li> <li>贰</li> <li>叁</li> <li>肆</li>
<li><a href="http://www.itleon.net">伍</a></li> </ul></div> </body></html>