[网站建设]div+css横向二级菜单

如果也许技术备忘 2009-10-11 1.2K+

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>横向下拉菜单</title>

<!--

* {margin:0;padding:0;border:0;}

body {

font-family: arial, 宋体, serif;

font-size:12px;

}

#nav {

height: 24px; list-style-type: none; padding-left:200px;

line-height:24px;overflow:hidden;background:#999;

}

#nav a {

display: block; width: 80px; text-align:center;

}

#nav a:link {

color:#EEE; text-decoration:none;

}

#nav a:visited {

color:#EEE;text-decoration:none;

}

#nav a:hover {

color:#FFF;text-decoration:none;font-weight:bold;background:#CCC;

}

#nav li {

float: left; width: 80px;

}

#nav li ul {

line-height: 24px;

list-style-type: none;

text-align:left;

left: -999px;

width: 520px; //注意,这里一定要设置宽度;

position: absolute;

background:#CCC;

}

#nav li ul li{

float: left;width: 80px; //float就是子菜单横向的关键,可以继承父菜单而省略float

}

#nav li ul a{

display: block; width: 65px;text-align:left;padding-left:15px;

}

#nav li ul a:link {

color:#F1F1F1; text-decoration:none;

}

#nav li ul a:visited {

color:#F1F1F1;text-decoration:none;

}

#nav li ul a:hover {

color:#FFF;text-decoration:none;font-weight:normal;background:#C00;

}

#nav li:hover ul {

left:25%;

}

#nav li.sfhover ul {

left:25%;

}

#content {

clear: left;

}

-->

</style>

function menuFix() {

var sfEls = document.getElementById("nav").getElementsByTagName("li");

for (var i=0; i<sfEls.length; i++) {

sfEls[i].onmouseover=function() {

this.className+=(this.className.length>0? " ": "") + "sfhover";

}

sfEls[i].onMouseDown=function() {

this.className+=(this.className.length>0? " ": "") + "sfhover";

}

sfEls[i].onMouseUp=function() {

this.className+=(this.className.length>0? " ": "") + "sfhover";

}

sfEls[i].onmouseout=function() {

this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),

"");

}

window.onload=menuFix;

//--><!]]></script>

</head>

<body>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

<ul>

</ul>

</li>

</ul>

</div>

</body>

</html>

标签：网站建设

本文地址： https://www.yonle.net/article/WangZhanJianSheDIVCSSHengXiangErJiCaiDan.html

文章来源：如果也许