小货工作室

他是买来的风格，却缺少二级菜单的JS，我找了一下补上了

<script type=”text/javascript”>function $(id) {
return document.getElementById(id);
}

function showMenu (baseID, divID) {
baseID = $(baseID);
divID? = $(divID);
if (showMenu.timer) clearTimeout(showMenu.timer);
hideCur();
divID.style.display = ‘block’;
showMenu.cur = divID;

if (! divID.isCreate) {
divID.isCreate = true;
//divID.timer = 0;
divID.onmouseover = function () {
if (showMenu.timer) clearTimeout(showMenu.timer);
hideCur();
divID.style.display = ‘block’;
};

function hide () {
showMenu.timer = setTimeout(function () {divID.style.display = ‘none’;}, 1000);
}

divID.onmouseout = hide;
baseID.onmouseout = hide;
}
function hideCur () {
showMenu.cur && (showMenu.cur.style.display = ‘none’);
}
}</script>

然后我发现他的导航用的是channelartlist，但是次级菜单使用的标识竟然是typeid,这个就不一定会按顺序，导致二级菜单定位错误

然后我想到使用autoindex,上网搜索了一下，有人说channelartlist中不能用autoindex，可以用{dede:global name=’itemindex’/}标签取代autoindex标签，我尝试了一下，果然可以

最终形成下面的代码

<div>

<div>

<ul>

<li><a href='{dede:global.cfg_cmsurl/}/’>首页</a></li>

{dede:channelartlist typeid=’top’}

<li><a href=”{dede:field name=’typeurl’/}” id=”nav_{dede:global name=’itemindex’/}” onmouseover=”showMenu(‘nav_{dede:global name=’itemindex’/}’,’subnav{dede:global name=’itemindex’/}’)” >

{dede:field name=’typename’/}</a>

<div id=”subnav{dede:global name=’itemindex’/}”>

<p>.</p>

<p><span>

{dede:channel type=’son’}

<a href=”[field:typelink/]”>[field:typename/]|</a><!–[field:id/]–>

{/dede:channel}

</span></p>

</div>

</li>

{/dede:channelartlist}

</ul>

</div>

</div>

剩下就是CSS的问题了，留一份备份，subnav5被我修改过了，原来是直接右边对齐的

/* Nav

==========================================================*/

.nav {

position: relative;

margin: 0 10px 2px;

background: url(../images/nav_bg.png) no-repeat 0 -36px;

}

.navinner {

background: url(../images/nav_bg.png) no-repeat 100% -72px;

}

.navlist {

height: 36px;

line-height: 36px;

overflow: hidden;

margin: 0 10px;

background: url(../images/nav_bg.png) repeat-x 0 0;

}

.nav li {

float: left;

display: inline;

margin: 0 0 0 -2px;

padding: 0 4px 0 6px;

background: url(../images/nav_bg.png) no-repeat 0 -108px;

}

.nav a {

display: block;

width: 102px;

text-align: center;

font-size: 120%;

}

.nav a:link, .nav a:visited {

color: #fff;

}

.nav a.current, .nav a:hover, .nav a:active {

color: #fff;

font-weight: bold;

background: url(../images/nav_bg.png) no-repeat 50% -144px;

}

.subnav {

position: absolute;

top: 41px;

left: 0;

float: left;

height: 27px;

line-height: 27px;

white-space: nowrap;

background: url(../images/nav_bg.png) no-repeat 0 -180px;

}

* html .subnav {

margin: 0 10px 0 -10px; /* IE 6 and below */

}

.subnav p {

padding: 0 10px;

background: url(../images/nav_bg.png) no-repeat 100% -234px;

}

.subnav p span {

display: block;

background: url(../images/nav_bg.png) repeat-x 0 -207px;

}

.subnav p.pointer {

position: absolute;

top: -4px;

left: 0;

height: 5px;

width: 11px;

padding: 0;

margin-left: 20px;

text-indent: -999em;

background: url(../images/nav_bg.png) repeat-x 0 -261px;

}

.subnav a {

display: inline;

padding: 0;

font-size: 100%;

}

[class~=”subnav”] a {

padding: 0 3px;

}

.subnav, .subnav a:link, .subnav a:visited {

color: #235e99;

}

.subnav a:hover, .subnav a:active {

color: #235e99;

}

.subnav a:hover, .subnav a:active {

font-weight: normal;

background: none;

border-bottom: 2px solid;

}

/* subnav position and pointer position */

#subnav1 { left: 120px; }

#subnav2 { left: 230px; }

#subnav3 { left: 340px; }

#subnav4 { left: 450px; }

#subnav5 { left: 560px; }
#subnav6, #subnav7 {

left: auto;

right: 0px;

}

#subnav1 .pointer,

#subnav2 .pointer,

#subnav3 .pointer,

#subnav4 .pointer,

#subnav5 .pointer { left: 30px; }

#subnav6 .pointer { left: auto; right: 180px; }

#subnav7 .pointer { left: auto; right: 70px; }

#subnav1, #subnav2, #subnav3, #subnav4 {

min-width: 110px;

}

#subnav5 { min-width: 340px; }

#subnav6 { min-width: 240px; }

#subnav7 { min-width: 130px; }