如何制作纯 CSS 下拉菜单？

制作纯 CSS 下拉菜单

在网页设计领域，创建无缝、用户友好的导航菜单的能力是最重要的。在各种菜单样式中，下拉菜单因其优雅地组织和显示导航选项的能力而脱颖而出。本文将深入探讨创建纯 CSS 下拉菜单的复杂艺术，该菜单不仅实用，而且在视觉上也很吸引人。

HTML 结构

HTML 结构基本的下拉菜单相对简单。我们从一个无序列表 (

<ul>) 开始，它用作菜单项的容器。在列表中，每个菜单项都由一个列表项 (

) 表示。

示例 HTML：

<ul>

CSS 样式

为了将 HTML 结构转换为功能性下拉菜单，我们使用以下 CSS样式：

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

ul li {
  display: block;
  position: relative;
  float: left;
}

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;
}

工作原理

初始样式设置菜单的整体外观，包括字体、边距和填充。 li 元素的默认显示属性设置为 block，允许它们水平显示。下拉子菜单最初通过将其显示属性设置为 none 来隐藏。

悬停状态定义为使用position:absolute显示子菜单，将它们对齐在其父项下方。此外，子菜单的 li 和 a 元素继承样式以保持一致的外观。将鼠标悬停在子菜单项上会触发背景颜色的进一步变化。

结论

创建纯 CSS 下拉菜单需要仔细的 HTML 结构和深思熟虑的 CSS 样式。通过掌握这些技术，网页设计师可以释放优雅且实用的导航菜单的力量，从而增强用户体验并展示他们的创造力。

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