It was changed in the original level two directory, first give the demo
Here is the CSS
Copy Code code as follows:
/*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;p adding:8px 2px}
/* First Level *
. M_menu_content p{height:22px;line-height:22px}
. m_menu_content P a{
Color: #666633;
Font-weight:bold;
Text-decoration:none;
Background:url (yun_qi_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}
/* Two level * *
. menu2{}
. MENU2 li{line-height:22px}
. menu2 A{color: #000;
Text-decoration:none;
Display:block;
padding:0 0 0 40px;
Background:url (yun_qi_img/icon.gif) no-repeat 18px 4px
}
. MENU2 a.on{background-position:18px-18px}
/* Three level * *
. 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}
The catalogue is circular, I wrote it to death. Here's a JS.
Copy Code code as follows:
/*
Here is directly written dead, according to the incoming ID number, to determine whether to display, do not show on display
The ID number is regular and can be cycled out of the directory using the server-side language
*/
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 = "";
}
}
Demo View
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; Charset=utf-8 "/> <title> simple Level Three catalog demo </title> <style> <!--/*bg Maiji (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;p adding:8px 2px}/* One level/* m_menu_content p{height:22px;line-height:22px }. m_menu_content P A{color: #666633; Font-weight:bold;text-decoration:none;background:url (yun_qi_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}/* Level two/menu2{}. Menu2 li{line-height:22px} menu2 a{color: #000; text-de CoraTion:none; Display:block; padding:0 0 0 40px; Background:url (yun_qi_img/icon.gif) no-repeat 18px 4px;} MENU2 a.on{background-position:18px-18px}/* Level three/menu2 ul{menu2 ul a{background-position:30px-39px 0 0 50px; Color: #666633; Text-decoration:underline}. menu2 ul a:hover{background-color: #f5f5f5; color: #f60} </style> </pead> &L t;body> <div > <div class= "m_menu_title" > Management Center </div> <div class= "M_menu_content" > <p> Level Catalogue (eldest) </p> <ul id= "ul1" class= "MENU2" > <li> II Level directory (second) <ul id= "Ul11" > <li> file Management </li> <li> log Management </li> <li> album Management </li> <li> Video management </li> <li> Music management </li> <li> Room Management </li> <li> goods management </li> </ul> </li> <Li> Level Two directory (second) <ul id= "ul12" > <li> file Management </li> <li > Log Management </li> <li> album Management </li> <li> video Management </li> <li> Le management </li> <li> room management </li> <li> items Management </li> </ul> </li> <li> Level Two directory (second) <ul id= "Ul13" > <l I> Archive Management </li> <li> Log management </li> <li> album Management </li> <li> Video Management </li> <li> music management </li> <li> Room Management </li> <li> goods Management & lt;/li> </ul> </li> </ul> & Lt;p> Level 2 (Boss) </p> <ul id= "Ul2" class= "menu2" > <li> two level directory (second ) <ul ID= "Ul21" > <li> file Management </li> <li> Log management </li> <li> album Management < /li> <li> Video Management </li> <li> music management </li> <li> Room Management </LI&G T <li> Goods Management </li> </ul> </li> <li> Level two directory (second ) <ul id= "ul22" > <li> file Management </li> <li> log Management </li> <li> album Management </li> <li> Video management </li> <li> Music management </li> <li> Room Management </li> <li> goods management </li> </ul> </li> <li> Level Two catalog (second) <ul id= "ul23" > <li> file Management </li> <li> Log Management </li> <li> album Management </li> <li> Video Management </li> <li> Music Management </li> <li> Room management </li> <li> Item Management </li> </ul> </li> </ul> <p> Level directory 2 (eldest) </p> <ul id= "Ul3 "Class=" MENU2 > <li> Level Two directory (Dick) <ul id= "ul31" > <li> file Case Management </li> <li> Log management </li> <li> album Management </li> <li> Video Management &L T;/li> <li> Music Management </li> <li> Room management </li> <li> Item Management </li > </ul> </li> <li> Level two catalogue (second) <ul Id= "Ul32" > <li> file Management </li> <li> Log management </li> <li> album Management & lt;/li> <li> Video Management </li> <li> music management </li> <li> Room Management </l I> <lI> Goods Management </li> </ul> </li> <li> Level Two directory (second) <ul id= "ul33" > <li> file Management </li> <li> log Management </li> <li> album Management </li> <li> Video management </li> <li> Music management </li> < li> Room Management </li> <li> goods management </li> </ul> </li> </u L> <p> exit </p> </div> </div> <script>//<! [cdata[/* Here is directly written dead, according to the incoming ID number, to determine whether the display, do not show the ID number is regular, available server-side language to recycle the directory/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 = ""; }//]]> </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
