用纯CSS做一个导航下拉菜单，好用！

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

HTML 部分：

1、我们可以使用任何HTML元素来打开下拉菜单，比如：或者一个元素

2、使用容器元素（例如

) 创建下拉菜单的内容并将其放置在您想要的任何位置。

3、use

elements 来包裹这些元素，并使用 CSS 来设置下拉内容的样式。

CSS 部分：

1、.dropdown 使用 position:relative，它将设置下拉菜单的内容放置在下拉按钮的右下角（使用 position:absolute）。

2、.dropdown-content 是实际的下拉菜单。默认隐藏，鼠标移动到指定元素后才会显示。注意：如果要设置下拉内容和下拉按钮的宽度一样，可以设置宽度为100%。

3、:hover 选择器用于当鼠标移动到下拉按钮上时显示下拉菜单。

示例：使用纯CSS制作导航下拉菜单，当鼠标经过下拉菜单时出现

HTML 代码：

纯CSS实现鼠标移动到按钮上打开下拉菜单。
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中文网其他相关文章！
免责声明：本文首发于php中文网。转载请注明出处。感谢您的尊重！如果您有任何问题，请联系我们
					

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/bofangqi/article-381216-1.html