一个非常简单易用而且兼容非常好的下拉菜单

 
    
    #main_daohang_left li{ 
    width: 
    60px; 
     <!--定义li的长度为60个像素，背景为red -->
background-Color: 
    red;} 
     
#main_daohang_left li a,#main_daohang_left li ul li a{ 
     <!--设置a的link样式 -->
text-decoration: 
    none;} 
     
#main_daohang_left li ul{ 
       <!--定位在左边，主要是为了好看-->
padding-left: 
    0px; 
     } 
     
#main_daohang_left li ul li{ 
       <!--下拉菜单的文字排版问题-->
padding-bottom: 
    5px; 
     padding-top: 
    5px; 
     vertical-align: 
    middle; 
    
} 
     
#main_daohang_left li,#main_daohang_left li ul li{ 
     list-style: 
    none;} 
    
#main_daohang_left li ul{ 
     position: 
    absolute; 
       <!-- 注意：主要是为了定位，使得下拉菜单放置网页的任何位置上-->
 display: 
    none;} 
     
#main_daohang_left li#menu:hover ul{ 
       <!--a上鼠标到达时运行的样式 -->
display: 
    block; 
     } 
    
#main_daohang_left li ul li:hover{ 
       <!--a上鼠标到达时运行的样式 -->
background-color: 
    #DA937D;} 
    
#main_daohang_left li ul,#main_daohang_left li ul li{ 
       <!--下拉菜单的样式-->
width: 
    200px; 
     background-color: 
    #487EB5;} 
      
    
  

 

以上是css代码 下面是例子：（由于时间关系，我就没有详细说明整个的代码含义了，相信大家都可以看懂的吧）

 

 
    
    <ul id="main_daohang_left">


               <li id="menu"><a href="#"><span onMouseOver="d_css(id)" onMouseOut="d_css_out(id)" id="student">第一项

</span></a>
                  
                   <!--此处为菜单项-->
                                <ul>
                                      <li><a href="#">第1行</a></li>
                                      <li><a href="#">第2行</a></li>
                                      <li><a href="#">第3行</a></li>
                                      <li><a href="#">第4行</a></li>
                                </ul>
                           
                    
                  
               </li>
</ul> 
    
  

 

 

 

 

 

<ul id="main_daohang_left">


               <li id="menu"><a href="#"><span onMouseOver="d_css(id)" onMouseOut="d_css_out(id)" id="student">第一项

</span></a>
                  
                   <!--此处为菜单项-->
                                <ul>
                                      <li><a href="#">第1行</a></li>
                                      <li><a href="#">第2行</a></li>
                                      <li><a href="#">第3行</a></li>
                                      <li><a href="#">第4行</a></li>
                                </ul>
                           
                    
                  
               </li>