是在原先的二级目录改的,先给出演示

这里是css

复制代码 代码如下:

/*bgmacji(http://www.macji.com)*/

ul,li,p{margin:0;padding:0;list-style:none;font-size:12px}

.m_menu_title{height:24px;line-height:24px;text-align:center;margin:01px}

.m_menu_content{border-top:solid1px#ccc;padding:8px2px}

/*一级*/

.m_menu_contentp{height:22px;line-height:22px}

.m_menu_contentpa{

color:#666633;

font-weight:bold;

text-decoration:none;

background:url(http://www.macji.com/blog/img/icon.gif)no-repeat8px4px;

padding:00030px;

display:block

}

.m_menu_contentpa:hover{color:#fe8005;font-weight:bold;text-decoration:none}

.m_menu_contentpa.on{background-position:8px-18px}

/*二级*/

.menu2{}

.menu2li{line-height:22px}

.menu2a{color:#000;

text-decoration:none;

display:block;

padding:00040px;

background:url(http://www.macji.com/blog/img/icon.gif)no-repeat18px4px

}

.menu2a.on{background-position:18px-18px}

/*三级*/

.menu2ul{}

.menu2ula{

background-position:30px-39px;

padding:00050px;

color:#666633;

text-decoration:underline

}

.menu2ula:hover{background-color:#f5f5f5;color:#f60}

目录是循环的,我给写死了.下面给出js

复制代码 代码如下:

/*

这里是直接写死了,根据传入的id编号,判断是否显示,不显示就显示

id编号是有规律的,可用服务器端语言循环出目录

*/

functionsetMenuList(num){

varp=document.getElementById('p'+num);

varul=document.getElementById('ul'+num);

if(ul.style.display==‘none'){

ul.style.display=”;

p.className=“on”;

}else{

ul.style.display=‘none';

p.className=“”;

}

}

演示查看

简易三级目录演示