脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

CSS下拉菜单简单制作教程

  发布时间：2016-07-05 14:40:41   作者：佚名   我要评论
这篇文章主要为大家详细介绍了CSS下拉菜单简单制作教程，鼠标移动到指定元素上会出现下拉菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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实现下拉菜单的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-09

  • CSS3模拟动画下拉菜单效果

    使用css3制作的下拉菜单外观非常漂亮，在各大网站都适用，今天小编通过本文给大家分享基于css3制作的动画下拉菜单效果，需要的的朋友参考下吧
    2017-04-12

  • CSS导航栏及弹窗示例代码

    本篇文章主要介绍了CSS导航栏及弹窗示例代码，导航栏和弹窗是在web中应用很广泛的，非常具有实用价值，需要的朋友可以参考下。
    2017-01-10

  • css制作黑色经典导航下拉菜单

    这篇文章主要为大家详细介绍了css制作黑色经典导航下拉菜单的相关代码，大气简单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-03-15

  • 你值得拥有的CSS下拉菜单效果

    这篇文章主要介绍了你值得拥有的多种CSS下拉菜单效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2016-03-14

  • 基于CSS实现的4级下拉菜单效果代码

    这篇文章主要为大家介绍了基于CSS实现的4级下拉菜单效果代码,基于css通过对页面元素样式的设置实现四级下拉菜单的效果,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-17

  • CSS实现的灰色下拉菜单效果代码

    这篇文章主要为大家介绍了CSS实现的灰色下拉菜单效果代码,涉及css控制hover样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-14

  • 纯CSS实现的大型下拉菜单的示例代码

    下拉菜单在很多网页中都能应用到，这篇文章主要介绍了纯CSS实现的大型下拉菜单的示例代码的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编
    2018-05-03

最新评论

关注微信公众号

扫一扫