树形菜单

 <ul id="menuList">
    <li class="menubar">
     <a href="#" id="productsActuator" onClick="" class="actuator">新闻测评</a>
   
     <ul id="productsMenu" class="menu">
     <li>
      <a href="#" id="newPhonesActuator" class="actuator">外部</a>
      <ul id="newPhonesMenu" class="submenu">
       <li><a href="#" id="fromActuator" class="actuator">按资讯来源</a>
           <ul id="fromMenu" class="frommenu">
        <%set rs=server.createobject("adodb.recordset")
          rs.open "select * from News_Source",check_conn,1,3
          do while not rs.eof or bof%>
              <li><a href="#"><%=rs("News_Source_Name")%></a></li>
          <%rs.movenext
          loop
          rs.close%>
        </ul>
       </li>
       <li><a href="#" id="classActuator" class="actuator">按资讯类别</a>
           <ul id="classMenu" class="classmenu">
         <%
          rs.open "select * from News_Class",check_conn,1,3
          do while not rs.eof or bof%>
              <li><a href="#"><%=rs("News_Class_Name")%></a></li>
          <%rs.movenext
          loop
          rs.close%>
         </ul>
       </li>
      </ul>
     </li>
      <li>
      <a href="#" id="compareActuator" class="actuator">内部</a>
      <ul id="compareMenu" class="submenu">
       <li><a href="#" id="classActuatorIn" class="actuator">按资讯类别</a>
           <ul id="classMenuIn" class="classmenuin">
         <%
          rs.open "select * from News_Class",check_conn,1,3
          do while not rs.eof or bof%>
              <li><a href="#"><%=rs("News_Class_Name")%></a></li>
          <%rs.movenext
          loop
          rs.close%>
         </ul>
       </li>
      </ul>
     </li>
     </ul>
    </li>
   </ul>

 

 

js

function initializeMenu(menuId, actuatorId) {
 var menu = document.getElementById(menuId);
 var actuator = document.getElementById(actuatorId);
 if (menu == null || actuator == null) return;
 actuator.onclick = function() {
  var display = menu.style.display;
  menu.style.display = (display == "block") ? "none" : "block";
  return false;
 }
}
window.onload = function() {
 initializeMenu("productsMenu", "productsActuator");
 initializeMenu("newPhonesMenu", "newPhonesActuator");
 initializeMenu("compareMenu", "compareActuator");
 initializeMenu("fromMenu", "fromActuator");
 initializeMenu("classMenu", "classActuator");
 initializeMenu("classMenuIn", "classActuatorIn");
}

 

 

css

/* CSS Document */
#menuList {
 margin: 0px;
 padding: 10px 0px 10px 15px;
 width: 160px;
 background-color: #EEE;
 color: #000;
 font-family: verdana, helvetica, arial, sans-serif;
}

li.menubar {
 font-size: 12px;
 line-height: 1.8em;
 list-style: none;
}

.menu, .submenu, .frommenu, .classmenu, .classmenuin {
 display: none;
 margin-left: 15px;
 padding: 0px;
}

.menu li, .submenu li, .frommenu li, .classmenu li, .classmenuin li{
 list-style: none;
}

#menuList a {
 background-color: transparent;
 color: #000;
 font-size: 12px;
 margin-left: 15px;
 text-decoration: none;
}

#menuList a:hover {
 text-decoration: underline;
}