&#106avascript +CSS横向三级导航菜单

王朝html/css/js·作者佚名 2006-11-24

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

body {

margin: 7px;

font:12px Verdana, Arial, Helvetica, sans-serif;

}

* {

list-style-type: none;

margin: 0px;

padding: 0px;

border: thin none;

}

#nav {

position: absolute;

font-size: 9px;

opacity: 0.8;

}

#nav a {

display: block;

width: 100px;

height: 15px;

padding: 3px 5px 12px;

background: #666;

color: #fff;

text-decoration: none;

}

#nav a:hover {

background: #333;

}

#nav li {

width: 120px;

height:30px;

overflow:hidden;

background: #ccc;

padding-bottom: 3px;

}

#nav ul {

position: absolute;

margin-left: 110px;

margin-top: -30px;

}

html>body #nav ul {

margin-left: 119px;

margin-top: -39px;

}

#nav ul {

display: none;

}

#nav li.show ul {

display: block;

}

#nav li.show li ul {

display: none;

}

#nav li li.show ul {

display: block;

}

</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? " ": "") + "show";

}

sfEls[i].onmouseout=function() {

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

}

window.onload=menuFix;

</script>

</head>

<body>

<li><a href="#">nav item</a>.

<ul>

<li><a href="#">nav item</a>.

<ul>

</ul>

</li>

<li><a href="#">nav item</a>.

<ul>

</ul>

</li>

<li><a href="#">nav item</a>.

<ul>

</ul>

</li>

<li><a href="#">nav item</a>.

<ul>

</ul>

</li>

</ul>

</li>

<li><a href="#">nav item</a>.

<ul>

</ul>

</li>

<li><a href="#">nav item</a>.

<ul>

</ul>

</li>

</ul>

</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<style>

body {

margin: 7px;

font:12px Verdana, Arial, Helvetica, sans-serif;

}

* {

list-style-type: none;

margin: 0px;

padding: 0px;

border: thin none;

}

#nav {

position: absolute;

font-size: 9px;

opacity: 0.8;

}

#nav a {

display: block;

width: 100px;

height: 15px;

padding: 3px 5px 12px;

background: #666;

color: #fff;

text-decoration: none;

}

#nav a:hover {

background: #333;

}

#nav li {

width: 120px;

height:30px;

overflow:hidden;

background: #ccc;

padding-bottom: 3px;

}

#nav ul {

position: absolute;

margin-left: 110px;

margin-top: -30px;

}

html>body #nav ul {

margin-left: 119px;

margin-

[1] [2] 下一页