【ITEYE】css创建鼠标悬停下拉菜单样式

原文链接：http://1175644344.iteye.com/blog/2331973

下拉菜单在网站中到处可见。

下面用css设置下拉菜单样式。

Html代码  收藏代码
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <title>淘宝</title>  
  5. <meta charset="utf-8">  
  6. <body>  
  7. <div class=dropdown>  
  8.     <button class="dropbtn">我的淘宝</button>  
  9.        <div class="dropdown-content">  
  10.            <a href="#">已买到的宝贝</a>  
  11.            <a href="#">我的足迹</a>  
  12.        </div>  
  13. </div>  
  14. </body>  
  15. </html>  

 css来设置样式

Css代码  收藏代码
  1. .dropdown-content {  
  2.     display: none;//隐藏下拉菜单的内容  
  3.     position: absolute;  
  4.     #f9f9f9;  
  5.     min-width: 160px;最小宽度  
  6.     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);//做边框阴影  
  7. }  
  8. .dropdown-content a:hover {  
  9. #f1f1f1  
  10. }  
  11. //hover设置光标悬停未点击之前的样式  
  12.   
  13. .dropdown:hover .dropdown-content {  
  14.     display: block;  
  15. }//鼠标悬停显示下拉菜单  
  16.   
  17. .dropdown:hover .dropbtn {  
  18.     #f5f5f5;  
  19. }  

posted on 2016-11-30 11:27  msmailcode  阅读(428)  评论(0)  编辑  收藏  举报