如何仅使用 CSS 创建下拉菜单？-css教程-PHP中文网

如何仅使用 CSS 创建下拉菜单？

DDD

发布： 2024-12-26 19:59:11

原创

823 人浏览过

How Can I Create a Dropdown Menu Using Only CSS?

基于纯 CSS 的下拉菜单创建

在 Web 开发中，下拉菜单是一种常见的 UI 元素，用于逻辑地组织和呈现选项。如果您想要一个不依赖外部框架或 JavaScript 的下拉菜单，纯 CSS 可以提供合适的解决方案。

纯 CSS 下拉菜单实现

构建一个纯 CSS - 基于下拉菜单，请按照以下步骤操作：

HTML 结构： 定义无序列表 (<ul>)，每个列表项 (
) 代表一个菜单项。在列表项内，嵌套其他无序列表作为子菜单。
样式： 使用 CSS 设置菜单样式。将 ul 设置为没有项目符号、没有边距和水平对齐。将 li 元素置于内联块中以进行水平对齐。
下拉可见性： 要切换子菜单的可见性，请在列表项上使用 :hover 伪类。将鼠标悬停在列表项上时，其子菜单 (ul) 变为可见。
菜单外观： 使用 CSS 属性（如背景颜色、颜色和填充。

示例代码

以下代码片段提供了一个纯 CSS 下拉菜单的示例：

HTML:

<ul>

登录后复制

CSS：

ul {
  font-family: Arial, Verdana;
  font-size: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li {
  display: inline-block;
  position: relative;
}

li ul {
  display: none;
}

ul li a {
  display: block;
  text-decoration: none;
  color: #ffffff;
  border-top: 1px solid #ffffff;
  padding: 5px 15px 5px 15px;
  background: #2C5463;
  margin-left: 1px;
  white-space: nowrap;
}

ul li a:hover {
  background: #617F8A;
}

li:hover ul {
  display: block;
  position: absolute;
}

li:hover li {
  float: none;
  font-size: 11px;
}

li:hover a {
  background: #617F8A;
}

li:hover li a:hover {
  background: #95A9B1;
}

登录后复制

现场演示： [jsfiddle.net/XPE3w/7/](http://jsfiddle.net/XPE3w/7/)

以上是如何仅使用 CSS 创建下拉菜单？的详细内容。更多信息请关注PHP中文网其他相关文章！