JS+CSS弹出式二级菜单示例

JS+CSS弹出式二级菜单示例

这种方式把内容和行为混合在了一起，不是很满意，大家凑合用吧。

外观：


全部代码：

<! doctype html public  " -//w3c//dtd html 4.0 transitional//en " >
< html >
  < head >
   < title > JS + CSS菜单示例 </ title >
   < style type = " text/css " >
     <!--
    #menubar ul{
      margin: 0 ;
      padding: 0 ;
      list - style - type:none;
    }
    #menubar li{
       float :left;
      dispaly:block;      
    }
    #menubar li a{
      width:80px;
      height:20px;
      line - height: 20px;

      font - size:14px; 
      border - right:1px solid #ffffff;  
      
      color:#ffffff;
      text - decoration:none;
      text - align:center;
      font - weight:bold;
      background - image:url(img / menubarBg.gif);
    }

    #menubar li a:hover{
      color:#ffffff;
      background - image:url(img / munuBarItemBG.gif);      
      text - decoration:underline;
    }

    #menubar li ul{
      display:none;
      margin: 0 ;
      padding: 0 ;
      list - style - type:none;
    }
    #menubar li ul li{
       float :none;
      dispaly:block;      
    }
    #menubar li ul li a{
      width:80px;
      height:20px;
      line - height: 20px;

      font - size:14px; 
      border - right:1px solid #ffffff;  
      
      color:#ffffff;
      text - decoration:none;
      text - align:center;
      font - weight:bold;
      background - image:url(img / menubarBg.gif);
    }

    #menubar li ul li a:hover{
      color:#ffffff;
      background - image:url(img / munuBarItemBG.gif);      
      text - decoration:underline;
    }

     -->
   </ style >     
  </ head >

  < body >
  弹出式菜单示例
   < div >
     < ul id = " menubar " >
       < li onmouseover = " showMenu('han',true) "  onmouseout = " showMenu('han',false) " >< a href = " # " > 汉朝 </ a >
         < ul id = " han " >
           < li >< a href = " # " > 卫青 </ a ></ li >
           < li >< a href = " # " > 霍去病 </ a ></ li >
           < li >< a href = " # " > 班超 </ a ></ li >
           < li >< a href = " # " > 陈汤 </ a ></ li >
         </ ul >
       </ li >
       < li onmouseover = " showMenu('jin',true) "  onmouseout = " showMenu('jin',false) " >< a href = " # " > 晋朝 </ a >
         < ul id = " jin " >
           < li >< a href = " # " > 阮籍 </ a ></ li >
           < li >< a href = " # " > 嵇康 </ a ></ li >
           < li >< a href = " # " > 陶渊明 </ a ></ li >
           < li >< a href = " # " > 王羲之 </ a ></ li >
           < li >< a href = " # " > 桓温 </ a ></ li >
         </ ul >
       </ li >
       < li onmouseover = " showMenu('tang',true) "  onmouseout = " showMenu('tang',false) " >< a href = " # " > 唐朝 </ a >
         < ul id = " tang " >
           < li >< a href = " # " > 李世民 </ a ></ li >
           < li >< a href = " # " > 李白 </ a ></ li >
           < li >< a href = " # " > 杜甫 </ a ></ li >
           < li >< a href = " # " > 狄仁杰 </ a ></ li >
         </ ul >
       </ li >
       < li onmouseover = " showMenu('song',true) "  onmouseout = " showMenu('song',false) " >< a href = " # " > 宋朝 </ a >
         < ul id = " song " >
           < li >< a href = " # " > 岳飞 </ a ></ li >
           < li >< a href = " # " > 辛弃疾 </ a ></ li >
           < li >< a href = " # " > 苏轼 </ a ></ li >
         </ ul >
       </ li >
       < li onmouseover = " showMenu('ming',true) "  onmouseout = " showMenu('ming',false) " >< a href = " # " > 明朝 </ a >
         < ul id = " ming " >
           < li >< a href = " # " > 徐达 </ a ></ li >
           < li >< a href = " # " > 蓝玉 </ a ></ li >
           < li >< a href = " # " > 于谦 </ a ></ li >
           < li >< a href = " # " > 戚继光 </ a ></ li >
           < li >< a href = " # " > 谭伦 </ a ></ li >
         </ ul >
       </ li >
     </ ul >
   </ div >
  </ body >
</ html >

< SCRIPT LANGUAGE = " JavaScript " >
<!--
   function  $(id){
     return  document.getElementById(id);
  }

   function  showMenu(ulId,visible){
     var  ul = $(ulId);

     if (visible == true ){
      ul.style.display = " block " ;
    }
     else {
      ul.style.display = " none " ;
    }
  }
// -->
</ SCRIPT >

其实关键是showMenu这个函数，其他没什么。

全部代码下载：
http://www.blogjava.net/Files/heyang/JSCSSPopupmenu20090821133746.rar