用纯CSS实现鼠标经过后出现下拉菜单，实例讲解（附代码）

随便打开网上的任何一个网站，你会发现这些网站都有导航部分，而且有些导航在鼠标经过后，会出现下拉菜单，那这种下拉菜单怎么做呢？其实，用纯CSS就可以做导航下拉菜单。接下来，就和大家聊聊CSS怎么做下拉菜单，好，进入正题。

HTML 部分：
1、我们可以使用任何的 HTML 元素来打开下拉菜单，如：或 a 元素
2、使用容器元素 (例如

) 来创建下拉菜单的内容，并放在任何你想放的位置上。
3、使用

元素来包裹这些元素，并使用 CSS 来设置下拉内容的样式。
CSS 部分：
1、.dropdown 使用 position:relative, 这将设置下拉菜单的内容放置在下拉按钮 (使用 position:absolute) 的右下角位置。
2、.dropdown-content 中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。 注意:如果你想设置下拉内容与下拉按钮的宽度一致，可设置 width 为 100% 。
3、:hover 选择器用于将鼠标移动到下拉按钮上时显示下拉菜单。

实例：用纯CSS做一个导航下拉菜单，当鼠标经过时出现下拉菜单

HTML代码：

<p>纯CSS实现鼠标移动到按钮上打开下拉菜单。</p>
  <div class="dropdown">
   <button class="dropbtn">下拉菜单</button>
   <div class="dropdown-content">
    <a href="#">菜单1</a>
    <a href="#">菜单2</a>
    <a href="#">菜单3</a>
   </div>
  </div>

CSS部分：

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
   }   
   .dropdown {
    position: relative;
    display: inline-block;
   }
   .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
   } 
   .dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
   }   
   .dropdown-content a:hover {
    background-color: #f1f1f1
   }  
   .dropdown:hover .dropdown-content {
    display: block;
   }   
   .dropdown:hover .dropbtn {
    background-color: #3e8e41;
   }

看效果图片：

以上用实例展示了纯CSS怎么做下拉菜单，在实际项目中，可以根据需要，设置需要的样式！

以上是用纯CSS实现鼠标经过后出现下拉菜单，实例讲解（附代码）的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：

css 下拉菜单

来源：php.cn

上一篇：css关于 overflow属性的一些小技巧， overflow属性介绍 下一篇：什么是css选择器？css3中5种常见的基本选择器（代码实例）

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章

• CSS如何让iframe实现自适应高度的效果
  2018-10-31 17:57:36
• 图文详解HTML和CSS怎么制作分页效果
  2018-10-31 17:28:34
• CSS如何将段落的首行缩进两个字符（图文详解）
  2018-10-31 15:50:57
• HTML和CSS实现字体加粗的三种方法
  2018-10-31 15:05:49
• HTML编辑器有哪些？最好用的4款HTML编辑器推荐
  2018-10-31 11:50:53
• 图文详解JavaScript和jQuery的区别
  2018-10-30 17:13:34
• html5如何插入可自动播放的音频（图文）
  2018-10-30 16:08:04
• 如何用HTML5在页面中插入可自动播放的视频
  2018-10-30 14:53:09
• 如何用html和CSS实现页面加载loading动画效果
  2018-10-30 14:50:35
• jQuery中点击按钮实现显示与隐藏的方法
  2018-10-29 15:41:37

最新问题

关于CSS思维导图的课件在哪？ 课件

来自于 2024-04-16 10:10:18

0

0

1335

页面突然无法拉动 css 或 bootstrap 所以我正在开发一个页面，我昨天做了一部分，效果很好，今天我继续做剩下的部分，一切都很好。当我尝试将其作为普通html页面打开时，CSS或BOOTSTRAP不起作用，仅显示页面文本，...

来自于 2024-04-06 21:58:04

0

1

800

动态修改Javafx中的内联CSS样式 我试图在应用程序最大化时更改窗格的背景图像。我的背景是使用内嵌css设置的。我为样式设置了两个不同的变量和一个if语句。但是，我没有运气让它改变样式。StringcssStyle=...

来自于 2024-04-06 20:57:16

0

1

487

如何在 CSS 中使浮动元素垂直堆叠而不是水平堆叠？ 我正在尝试制作一个包含两列的网页，一侧具有主要内容，另一侧具有额外的内容。但是因为我使用浮动属性将额外的列向左对齐，所以它水平堆叠，但我希望它垂直堆叠。我当前的代码：.topich...

来自于 2024-04-06 20:45:26

0

2

386

有没有办法强制弹性框中的文本垂直居中，无论我们有什么其他 CSS 代码？ 我有以下CSS代码，它是我正在开发的网站中使用的更大CSS代码的一部分：.cards-u{display:flex;flex-wrap:wrap;justify-content:c...

来自于 2024-04-06 20:41:51

0

1

518

相关专题

更多>

• CSS
• css居中
• css如何插入图片
• css超出显示...
• css字体颜色
• 什么是css
• css三角形怎么写
• css设置文字颜色