基础 CSS 向下钻取菜单

向下钻取菜单，也称为下拉菜单，是网站或应用程序中常见的交互元素之一。它允许用户从一组选项中选择一个选项，而不是给出所有选项。本文将介绍如何使用基础的 CSS 创建向下钻取菜单。

HTML 结构

要创建下拉菜单，需要为其提供 HTML 结构。以下代码演示了这种结构：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
      <a href="#">Services &#x25BC;</a>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Graphic Design</a></li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

在上面的代码中，nav 标签包含一个 ul 元素。每个 li 元素代表一个菜单项，并包含一个超链接 a 元素。第三个菜单项有一个额外的 ul 元素，表示它有几个下拉选项。

基本 CSS 样式

要将下拉菜单样式起来，我们需要用 CSS 为其添加样式。以下是一个基本的样式，只包含文字颜色和其他简单的样式，没有下拉效果：

nav {
  background-color: #eee;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-right: 20px;
}

nav li a {
  display: block;
  color: #333;
  text-decoration: none;
}

nav li a:hover {
  color: #555;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #eee;
  padding: 10px;
}

nav ul li:hover > ul {
  display: inherit;
}

第一部分设置了背景色为灰色。第二部分设置了 ul 元素的一些基本样式。第三部分使用 display: inline-block 将菜单项显示为行内块元素。第四部分为菜单项的链接设置一些样式。:hover 伪类用于在鼠标悬停时更改链接文本颜色。最后两部分添加下拉菜单的样式，其中 ul 元素设置为 display: none，并使用绝对定位使其出现在菜单项下方。 nav ul li:hover > ul 选择器在菜单项悬停时显示下拉菜单。

增强 CSS 样式

以上 CSS 样式实现了基本的下拉菜单，但其风格不太好。以下是增强的样式，以改善外观：

nav {
  background-color: #2c3e50;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  display: inline-table;
}

nav ul:after {
  content: ""; clear: both; display: block;
}

nav ul li {
  float: left;
}

nav ul li:hover {
  background-color: #4d5b69;
}

nav ul li:hover a {
  color: #fff;
}

nav ul li a {
  display: block; padding: 0 10px;
  color: #b8c7ce; text-decoration: none;
}

nav ul ul {
  position: absolute; top: 100%;
  padding: 0;
}

nav ul ul li {
  float: none; 
  position: relative;
}

nav ul ul li a {
  padding: 0 10px;
  color: #fff;
}   

nav ul ul ul {
  position: absolute; left: 100%; top:0;
}

这个样式更改背景颜色和文字颜色，并使菜单项看起来更好。使用 display: inline-table 将菜单项设置为行内表单元素，因此现在可以设置每个菜单项的宽度。添加了一些鼠标悬停样式，并将下拉菜单改为灰色背景，白色文本。下拉菜单的样式已更改，以使其看起来更好。

最后

这样我们就完成了一个基础的向下钻取菜单，可以根据需要，自定义其风格和效果。

# 基础 CSS 向下钻取菜单

向下钻取菜单，也称为下拉菜单，是网站或应用程序中常见的交互元素之一。它允许用户从一组选项中选择一个选项，而不是给出所有选项。本文将介绍如何使用基础的 CSS 创建向下钻取菜单。

## HTML 结构

要创建下拉菜单，需要为其提供 HTML 结构。以下代码演示了这种结构：

在上面的代码中，nav 标签包含一个 ul 元素。每个 li 元素代表一个菜单项，并包含一个超链接 a 元素。第三个菜单项有一个额外的 ul 元素，表示它有几个下拉选项。

基本 CSS 样式

要将下拉菜单样式起来，我们需要用 CSS 为其添加样式。以下是一个基本的样式，只包含文字颜色和其他简单的样式，没有下拉效果：

nav {
  background-color: #eee;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin-right: 20px;
}

nav li a {
  display: block;
  color: #333;
  text-decoration: none;
}

nav li a:hover {
  color: #555;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #eee;
  padding: 10px;
}

nav ul li:hover > ul {
  display: inherit;
}

第一部分设置了背景色为灰色。第二部分设置了 ul 元素的一些基本样式。第三部分使用 display: inline-block 将菜单项显示为行内块元素。第四部分为菜单项的链接设置一些样式。:hover 伪类用于在鼠标悬停时更改链接文本颜色。最后两部分添加下拉菜单的样式，其中 ul 元素设置为 display: none，并使用绝对定位使其出现在菜单项下方。 nav ul li:hover > ul 选择器在菜单项悬停时显示下拉菜单。

增强 CSS 样式

以上 CSS 样式实现了基本的下拉菜单，但其风格不太好。以下是增强的样式，以改善外观：

nav {
  background-color: #2c3e50;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
  display: inline-table;
}

nav ul:after {
  content: ""; clear: both; display: block;
}

nav ul li {
  float: left;
}

nav ul li:hover {
  background-color: #4d5b69;
}

nav ul li:hover a {
  color: #fff;
}

nav ul li a {
  display: block; padding: 0 10px;
  color: #b8c7ce; text-decoration: none;
}

nav ul ul {
  position: absolute; top: 100%;
  padding: 0;
}

nav ul ul li {
  float: none; 
  position: relative;
}

nav ul ul li a {
  padding: 0 10px;
  color: #fff;
}   

nav ul ul ul {
  position: absolute; left: 100%; top:0;
}

这个样式更改背景颜色和文字颜色，并使菜单项看起来更好。使用 display: inline-table 将菜单项设置为行内表单元素，因此现在可以设置每个菜单项的宽度。添加了一些鼠标悬停样式，并将下拉菜单改为灰色背景，白色文本。下拉菜单的样式已更改，以使其看起来更好。

最后

这样我们就完成了一个基础的向下钻取菜单，可以根据需要，自定义其风格和效果。