CSS下拉菜单简单制作教程

前端  /  管理员 发布于 7年前   174

本文实例为大家分享了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隐藏页面元素的5种方法
    下一条：
    CSS中的table-cell属性使用实例教程

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客