您的位置：首页 > Web前端 > CSS

横向三级展开的CSS垂直菜单_网页代码站(www.webdm.cn)

2010-12-26 11:58 861 查看 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>横向三级展开的CSS垂直菜单_网页代码站(www.webdm.cn)</title>
<style>
#nav,
#nav ul {float:left; padding:0 0 5px 0; margin:0; list-style:none; font: 10px verdana, sans-serif; border:1px solid #000; border-color:#cea #9b7

#8a6 #deb; border-width:1px 2px 2px 1px; background:#fff; position:relative; z-index:200;}
#nav li li {background:#fff;}
* html #nav li {float:left;}
#nav li a {display:block; color:#888; margin:0 25px 0 10px; height:20px; line-height:20px; text-decoration:none; white-space:nowrap;}
#nav li:hover {position:relative; z-index:300;}
#nav ul {position:absolute; left:-9999px; top:-9999px;}
* html #nav, * html nav ul {width:1px;}
#nav li:hover > ul {left:-15px; margin-left:100%; top:-1px;}
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
#nav li:hover > a {text-decoration:underline; color:#7b5;}
#nav li:hover ul,
#nav li:hover li:hover ul,
#nav li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover ul,
#nav li:hover li:hover li:hover li:hover li:hover ul
{left:-15px; margin-left:100%; top:-1px;}
#nav li:hover ul ul,
#nav li:hover li:hover ul ul,
#nav li:hover li:hover li:hover ul ul,
#nav li:hover li:hover li:hover li:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}
#nav li:hover a,
#nav li:hover li:hover a,
#nav li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover a,
#nav li:hover li:hover li:hover li:hover li:hover li:hover a
{text-decoration:underline; color:#7b5;}
#nav li:hover li a,
#nav li:hover li:hover li a,
#nav li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li a,
#nav li:hover li:hover li:hover li:hover li:hover li a
{text-decoration:none; color:#888;}
</style>
<script type="text/javascript">
stuHover = function() {
var cssRule;
var newSelector;// http://www.webdm.cn for (var i = 0; i < document.styleSheets.length; i++)
for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
{
cssRule = document.styleSheets[i].rules[x];
if (cssRule.selectorText.indexOf("LI:hover") != -1)
{
newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
}
}
var getElm = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<getElm.length; i++) {
getElm[i].onmouseover=function() {
this.className+=" iehover";
}
getElm[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
</script>
</head>
<body>
<ul id="nav">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">About us »</a>
<ul>
<li><a href="#nogo">Who we are</a></li>
<li><a href="#nogo">What we do</a></li>
</ul>
</li>
<li><a href="#nogo">Products »</a>
<ul>
<li><a href="#nogo">Tripods »</a>
<ul>
<li><a href="#nogo">Monopods</a></li>
<li><a href="#nogo">Adjutable head</a></li>
<li><a href="#nogo">Fixed</a></li>

</ul>
</li>
<li><a href="#nogo">Films »</a>
<ul>
<li><a href="#nogo">35mm</a></li>
<li><a href="#nogo">Color Print</a></li>
<li><a href="#nogo">Color Slide</a></li>
</ul>
</li>
<li><a href="#nogo">Cameras »</a>
<ul>
<li><a href="#nogo">Compact »</a>
<ul>
<li><a href="#nogo">Canon</a></li>
<li><a href="#nogo">Nikon</a></li>
</ul>
</li>
<li><a href="#nogo">Digital »</a>
<ul>
<li><a href="#nogo">Canon</a></li>
<li><a href="#nogo">Nikon »</a>
<ul>
<li><a href="#nogo">Lenses »</a>
<ul>
<li><a href="#nogo">Standard</a></li>
<li><a href="#nogo">Macro</a></li>
</ul>
</li>
<li><a href="#nogo">Speedlight</a></li>
<li><a href="#nogo">Coolpix »</a>
<ul>
<li><a href="#nogo">Coolpix S10</a></li>
<li><a href="#nogo">Coolpix S500</a></li>
</ul>
</li>
<li><a href="#nogo">D200</a></li>
<li><a href="#nogo">D80</a></li>
</ul>
</li>
<li><a href="#nogo">Minolta</a></li>
<li><a href="#nogo">Pentax</a></li>
</ul>
</li>
<li><a href="#nogo">SLR »</a>
<ul>
<li><a href="#nogo">Canon</a></li>
<li><a href="#nogo">Nikon</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#nogo">Flash</a></li>
<li><a href="#nogo">Video</a></li>
</ul>
</li>
<li><a href="#nogo">FAQs »</a>
<ul>
<li><a href="#nogo">Cameras</a></li>
<li><a href="#nogo">Film types</a></li>
</ul>
</li>
<li><a href="#nogo">Privacy »</a>
<ul>
<li><a href="#nogo">Privacy Policy</a></li>
<li><a href="#nogo">Privacy Statement</a></li>
</ul>
</li>
<li><a href="#nogo">Contact us</a></li>
</ul>
</body>
</html>
<br>
<a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！


文章来自：http://www.webdm.cn/webcode/0a7cdbce-2131-4e1d-a662-f65f3dc97738.html
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航