灰色简约CSS横向三级下拉菜单代码

  作者:会飞的

<!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

<!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>

<title>灰色简约三级CSS下拉菜单代码_CSS实例(wendang.xinge360.com)</title>

<style type="text/css">

body {

margin: 0;

padding: 30px;

background: #FFF;

color: #666;

}

h1 {

font: bold 16px Arial, Helvetica, sans-serif;

}

p {

font: 11px Arial, Helvetica, sans-serif;

}

a {

color: #900;

text-decoration: none;

}

a:hover {

background: #900;

color: #FFF;

}

ul#navmenu {

margin: 0;

border: 0 none;

padding: 0;

width: 500px;

list-style: none;

height: 24px;

}

ul#navmenu li {

margin: 0;

border: 0 none;

padding: 0;

float: left;

display: inline;

list-style: none;

position: relative;

height: 24px;

}

ul#navmenu ul {

margin: 0;

border: 0 none;

padding: 0;

width: 160px;

list-style: none;

display: none;

position: absolute;

top: 24px;

left: 0;

}

ul#navmenu ul li {

float: none;

display: block !important;

display: inline;

}

ul#navmenu a {

border: 1px solid #FFF;

border-right-color: #CCC;

border-bottom-color: #CCC;

padding: 0 6px;

float: none !important;

float: left;

display: block;

background: #EEE;

color: #666;

font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;

text-decoration: none;

height: auto !important;

height: 1%;

}

ul#navmenu a:hover,

ul#navmenu li:hover a,

ul#navmenu li.iehover a {

background: #CCC;

color: #FFF;

}

ul#navmenu li:hover li a,

ul#navmenu li.iehover li a {

float: none;

background: #EEE;

color: #666;

}

ul#navmenu li:hover li a:hover,

ul#navmenu li:hover li:hover a,

ul#navmenu li.iehover li a:hover,

ul#navmenu li.iehover li.iehover a {

background: #CCC;

color: #FFF;

}

ul#navmenu li:hover li:hover li a,

ul#navmenu li.iehover li.iehover li a {

background: #EEE;

color: #666;

}

ul#navmenu li:hover li:hover li a:hover,

ul#navmenu li:hover li:hover li:hover a,

ul#navmenu li.iehover li.iehover li a:hover,

ul#navmenu li.iehover li.iehover li.iehover a {

background: #CCC;

color: #FFF;

}

ul#navmenu li:hover li:hover li:hover li a,

ul#navmenu li.iehover li.iehover li.iehover li a {

background: #EEE;

color: #666;

}

ul#navmenu li:hover li:hover li:hover li a:hover,

ul#navmenu li.iehover li.iehover li.iehover li a:hover {

background: #CCC;

color: #FFF;

}

ul#navmenu ul ul,

ul#navmenu ul ul ul {

display: none;

position: absolute;

top: 0;

left: 160px;

}

ul#navmenu li:hover ul ul,

ul#navmenu li:hover ul ul ul,

ul#navmenu li.iehover ul ul,

ul#navmenu li.iehover ul ul ul {

display: none;

}

ul#navmenu li:hover ul,

ul#navmenu ul li:hover ul,

ul#navmenu ul ul li:hover ul,

ul#navmenu li.iehover ul,

ul#navmenu ul li.iehover ul,

ul#navmenu ul ul li.iehover ul {

display: block;

}

</style>

<script type="text/JavaScript">

navHover = function() {

var lis = document.getElementByIdx_x("navmenu").getElementsByTagName_r("LI");

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

lis[i].onmouseover=function() {

this.className+=" iehover";

}

lis[i].onmouseout=function() {

this.className=this.className.replace(new RegExp(" iehover\b"), "");

}

}

}

if (window.attachEvent) window.attachEvent("onload", navHover);

</script>

</head>

<body>

<h1>CSS Menu - Horizontal Modify by CSS实例</h1>

<FCK:hr  />

<ul id="navmenu">

<li><a href="/" _fcksavedurl="/">CSS实例</a></li>

<li><a href="/" _fcksavedurl="/">Work +</a>

<ul>

<li><a href="/" _fcksavedurl="/">Websites +</a>

<ul>

<li><a href="http://wendang.xinge360.com" _fcksavedurl="http://wendang.xinge360.com">jQuery</a></li>

<li><a href="#" _fcksavedurl="#">Ajax</a></li>

<li><a href="/" _fcksavedurl="/">Extjs</a></li>

</ul>

</li>

<li><a href="/" _fcksavedurl="/">Links</a></li>

<li><a href="/" _fcksavedurl="/">Contact</a></li>

</ul>

</li>

<li><a href="/" _fcksavedurl="/">Learn+</a>

<ul>

<li><a href="/" _fcksavedurl="/">CSS +</a>

<ul>

<li><a href="http://wendang.xinge360.com" _fcksavedurl="http://wendang.xinge360.com">CSS实例</a></li>

<li><a href="http://wendang.xinge360.com" _fcksavedurl="http://wendang.xinge360.com">SpriteNav</a></li>

</ul>

</li>

</ul>

</li>

<li><a href="http://wendang.xinge360.com" _fcksavedurl="http://wendang.xinge360.com">Messages</a></li>

</ul>

</body>

</html>