css实现下拉列表练习，原来javascipt的onmouseover和onmouseout可以用css轻松实现

   
   
   
   
   
   

标题栏测试

   

       
• 我的首页
             
  
                 
  • 我的Png
  
                 
  • 我的Gif
  
                 
  • 我的酷站
  
                 
  • 我的收藏
  
             
  
         

       
• 我的首页
             
  
                 
  • 我的Png
  
                 
  • 我的Gif
  
                 
  • 我的酷站
  
                 
  • 我的收藏
  
             
  
         

       
• 我的首页
             
  
                 
  • 我的Png
  
                 
  • 我的Gif
  
                 
  • 我的酷站
  
                 
  • 我的收藏
  
             
  
         

       
• 我的首页
             
  
                 
  • 我的Png
  
                 
  • 我的Gif
  
                 
  • 我的酷站
  
                 
  • 我的收藏
  
             
  
         

   

==============================================

CSS

==============================================

body {
    background: #fff;
    font-size: 16px;
}


h3 {
    text-align: center;
}


ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}


#nav > ul > li {
    width: 120px;
    border: 1px solid #eee;
    background: #f1fbec;
    padding: 4px 0;
    text-align: center;
    color: #999;
    cursor: pointer;
    position: relative;
    float: left;
    margin: 10px;
}


#nav ul li:hover {
    background: #f1fbec;
    color: #666;
    border: none;
}


#nav > ul > li > ul {
    border: 1px solid #eee;
    border-top: none;
    background: #f1fbec;
    position: absolute;
    top: 26px;
    left: 0;
    display: none;
}


#nav > ul > li > ul li a {
    color: #666;
    text-decoration: none;
    font-weight: bold;
}


#nav > ul > li > ul > li {
    width: 120px;
    padding: 10px 0;
    border: none;
}


#nav > ul > li > ul > li:hover {
    background: lightgreen;
    color: black;
    font-weight: bold;
    font-size: 20px;
}


#nav ul li:hover > ul {
    display: block;
}

转载于:https://www.cnblogs.com/i124q29/p/3842542.html