相思资源网 Design By www.200059.com

本文实例为大家分享了CSS下拉菜单的具体实现代码,供大家参考,具体内容如下

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.   <title>下拉菜单实例|菜鸟教程(runoob.com)</title>  
  5.   <meta charset="utf-8">  
  6.   <style>  
  7.   .dropdown {   
  8.       position: relative;   
  9.       display: inline-block;   
  10.   }   
  11.   .dropdown-content {   
  12.       display: none;   
  13.       position: absolute;   
  14.       background-color: #f9f9f9;   
  15.       min-width: 160px;   
  16.       box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);   
  17.       padding: 12px 16px;   
  18.   }   
  19.   .dropdown:hover .dropdown-content {   
  20.       display: block;   
  21.   }   
  22.   </style>  
  23. </head>  
  24. <body>  
  25. <h2>鼠标移动后出现下拉菜单</h2>  
  26. <p>将鼠标移动到指定元素上就能看到下拉菜单。</p>  
  27. <div class="dropdown">  
  28.   <span>鼠标移动到我这!</span>  
  29.   <div class="dropdown-content">  
  30.     <p>菜鸟教程</p>  
  31.     <p>www.runoob.com</p>  
  32.   </div>  
  33. </div>  
  34. </body>  
  35. </html>   

CSS下拉菜单简单制作教程

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

标签:
CSS,下拉菜单

相思资源网 Design By www.200059.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
相思资源网 Design By www.200059.com

评论“CSS下拉菜单简单制作教程”

暂无CSS下拉菜单简单制作教程的评论...