CSS下拉菜单示例

基本下拉菜单

创建一个下拉框，当用户将鼠标移到某个元素上时会出现该下拉框。

例子

<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

示例说明

HTML使用任何元素打开下拉内容，例如 <span>或<button>元素。

使用容器元素(如<div>)创建下拉内容并在其中添加任何您想要的内容。

在元素周围包裹一个<div>元素以使用 CSS 正确定位下拉内容。

CSS的.dropdown类用途position:relative，当我们想要的下拉内容这是需要正下方的下拉按钮(使用放置position:absolute)。

本.dropdown-content类保存实际下拉内容。默认情况下它是隐藏的，将在悬停时显示(见下文)。注意min-width设置为 160px。随意改变这一点。提示：如果您希望下拉内容的宽度与下拉按钮一样宽，请将 设置width为 100%(并overflow:auto在小屏幕上启用滚动)。

我们没有使用边框，而是使用 CSSbox-shadow属性使下拉菜单看起来像一张“卡片”。

该:hover选择器被用来显示在下拉菜单中，当用户在该下拉按钮移动鼠标。

下拉式菜单

创建一个下拉菜单，允许用户从列表中选择一个选项：

此示例与上一个示例类似，不同之处在于我们在下拉框中添加链接并为其设置样式以适合样式化的下拉按钮：

例子

<style>
/* Style The Dropdown Button */
.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #f1f1f1}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
  background-color: #3e8e41;
}
</style>
<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

右对齐的下拉内容

如果您希望下拉菜单从右到左，而不是从左到右，请添加 right: 0;

例子

.dropdown-content {
  right: 0;
}

以上就是动力节点小编介绍的"CSS下拉菜单示例"，希望对大家有帮助，想了解更多可查看Java教程。动力节点在线学习教程，针对没有任何Java基础的读者学习,让你从入门到精通,主要介绍了一些Java基础的核心知识，让同学们更好更方便的学习和了解Java编程，感兴趣的同学可以关注一下。