Discuz! 不错的二级导航下拉菜单还有三级。。。n级

vdone · 发表于 2010-8-11 23:38:55

本帖最后由 vdone 于 2010-8-11 23:40 编辑

网上找了一下午代码，终于找到了个比较满意的，个人认为挺好看的，我就是个小菜鸟- -！，也就能改改连接
这个代码应该很好改的吧，对应的名称把地址改一下就能用了，来这里分享下，希望能帮助需要的人

打开后台控制面板，扩展》站点广告 ? 广告列表 - 全局页头二级导航栏广告》编辑

二级导航

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>6级菜单</title>
<style>
#nav,
#nav ul {padding:0 0 5px 0; margin:0; list-style:none; font: 15px verdana, sans-serif; border:1px solid #000; border-color:#eca #b97 #a86 #edb; border-width:1px 2px 2px 1px; background:#fff; position:relative; z-index:200;}
#nav {height:25px; padding:0;}
#nav li {float:left;}
#nav li li {float:none; background:#fff;}
* html #nav li li {float:left;}
#nav li a {display:block; float:left; color:#888; margin:0 25px 0 10px; height:25px; line-height:25px; text-decoration:none; white-space:nowrap;}
#nav li li a {height:20px; line-height:20px; float:none;}
#nav li:hover {position:relative; z-index:300;}
#nav li:hover ul {left:0; top:22px;}
* html #nav li:hover ul {left:10px;}
#nav ul {position:absolute; left:-9999px; top:-9999px;}
* html #nav ul {width:1px;} /* www.codefans.net */
#nav li:hover 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:#b75;}
#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:#b75;}
#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;
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="http://www.hbccrc.com/index.php">首页</a></li>
<li><a href="#nogo">最新资讯 »</a>
<ul>
<li><a href="#nogo">国内快报</a></li>
<li><a href="#nogo">国外快报</a></li>
</ul>
</li>
<li><a href="#nogo">配件展示 »</a>
<ul>
<li><a href="#nogo">轮圈 »</a>
<ul>
<li><a href="#nogo">14寸</a></li>
<li><a href="#nogo">15寸</a></li>
<li><a href="#nogo">16寸</a></li>
<li><a href="#nogo">17寸</a></li>
</ul>
</li>
<li><a href="#nogo">尾翼 »</a>
<ul>
<li><a href="#nogo">35mm尾翼</a></li>
<li><a href="#nogo">Roll尾翼</a></li>
</ul>
</li>
<li><a href="#nogo">平衡杆 »</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">Mirror暂无</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暂无 L2</a></li>
<li><a href="#nogo">Coolpix暂无 4600</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>
<li><a href="#nogo">Minolta暂无</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#nogo">排气筒</a></li>
<li><a href="#nogo">Video暂无</a></li>
</ul>
</li>
<li><a href="#nogo">改装案例 »</a>
<ul>
<li><a href="#nogo">全部</a></li>
<li><a href="#nogo">A31</a></li>
<li><a href="#nogo">奥拓</a></li>
<li><a href="#nogo">捷达</a></li>
<li><a href="#nogo">福克斯</a></li>
<li><a href="#nogo">F0</a></li>
</ul>
</li>
<li><a href="#nogo">漂移视频 »</a>
<ul>
<li><a href="#nogo">自娱自乐</a></li>
<li><a href="#nogo">赛事活动</a></li>
</ul>
</li>
<li><a href="#nogo">旋风介绍</a></li>
<li><a href="#nogo">联系我们</a></li>
</ul>
</body>
</html>

复制代码

druo · 发表于 2010-8-14 00:36:08

代码太长了

bkai2008 · 发表于 2010-8-14 00:55:37

支持奖励下

instylecool · 发表于 2010-8-14 01:46:54

很不错……
可是……
好难的看完啊……

vdone · 发表于 2010-8-14 04:40:42

长，可能是下下下级菜单太多的缘故吧，可以自己删除不用的连接的- -！，我就找到这一个，谁有更好的啊，给我推荐个吧

，要简单的- -！，太复杂的弄不懂

vdone · 发表于 2010-8-14 04:42:49

本帖最后由 vdone 于 2010-8-14 04:44 编辑

还是不太会用这个发帖- -！，规则太复杂了，一不小心又点一下

eger_41 · 发表于 2010-9-6 22:46:12

支持一下哇！

ansincn · 发表于 2011-1-28 04:03:24

超级的 · 发表于 2011-3-2 00:46:46

qq7941420 · 发表于 2011-3-2 01:57:49

		自动登录	找回密码
密码			立即注册

[修改] Discuz! 不错的二级导航下拉菜单还有三级。。。n级

评分