一個非常簡單易用而且兼容非常好的下拉菜單

 
            
            #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>