学步园

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