javascript css 三级目录(简单的)

　　/*bg macji(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:0 1px}

　　.m_menu_content{border-top:solid 1px #ccc;padding:8px 2px}

　　/*一级*/

　　.m_menu_content p{height:22px;line-height:22px}

　　.m_menu_content p a{

　　color:#666633;

　　font-weight:bold;

　　text-decoration:none;

　　background:url(http://www.macji.com/blog/img/icon.gif) no-repeat 8px 4px;

　　padding:0 0 0 30px;

　　display:block

　　}

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

　　.m_menu_content p a.on{background-position:8px -18px}

　　/*二级*/

　　.menu2{}

　　.menu2 li{line-height:22px}

　　.menu2 a{color:#000;

　　text-decoration:none;

　　display:block;

　　padding:0 0 0 40px;

　　background:url(http://www.macji.com/blog/img/icon.gif) no-repeat 18px 4px

　　}

　　.menu2 a.on{background-position:18px -18px}

　　/*三级*/

　　.menu2 ul{}

　　.menu2 ul a{

　　background-position:30px -39px;

　　padding:0 0 0 50px;

　　color:#666633;

　　text-decoration:underline

　　}

　　.menu2 ul a:hover{background-color:#f5f5f5; color:#f60}

　　/*

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

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

　　*/

　　function setMenuList(num){

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

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

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

　　ul.style.display = ”;

　　p.className = “on”;

　　}else{

　　ul.style.display = ‘none';

　　p.className = “”;

　　}

　　}