如何制作纯 CSS 下拉菜单？

制作纯 CSS 下拉菜单

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

HTML 结构

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

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

  示例 HTML：

  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中文网其他相关文章！