纯css实现的下拉导航栏附html结构及css样式

下面是纯CSS实现下拉导航栏的攻略：

下面是纯CSS实现下拉导航栏的攻略：

HTML结构

首先，我们需要设置HTML结构，一般情况下，我们会用<ul>和<li>标签进行设置。

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a>
      <ul>
        <li><a href="#">Our Mission</a></li>
        <li><a href="#">Our Team</a></li>
      </ul>
    </li>
    <li><a href="#">Products</a>
      <ul>
        <li><a href="#">Product 1</a></li>
        <li><a href="#">Product 2</a></li>
      </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

通过上面的HTML结构，我们可以看出导航栏是由两个层级组成的。第一个层级是主菜单，第二个层级是下拉菜单。

CSS样式

接着，我们需要设置CSS样式。

主菜单的样式

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  background-color: #333;
  text-align: center;
}
nav li {
  display: inline-block;
  position: relative;
  margin-right: -4px;
  min-width: 100px;
}
nav a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  text-transform: uppercase;
}
nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #333;
}
nav ul ul li {
  display: block;
  width: 100%;
}
nav ul ul a {
  padding: 10px;
  color: #fff;
  font-size: 16px;
  text-transform: none;
}
nav ul ul a:hover {
  background-color: #444;
}

• nav ul：设置主菜单的样式。
• nav li：设置每个菜单项的样式，并将其设置为相对定位（position: relative），以便设置下属菜单的绝对定位（position: absolute）。
• nav a：设置每个菜单项中的链接的样式。
• nav ul ul：设置下拉菜单的样式，并将其放置在相对于主菜单的下面（top: 100%）。
• nav ul ul li：设置每个下拉菜单项的样式。
• nav ul ul a：设置每个下拉菜单项中的链接的样式。

下拉菜单的样式

当用户悬停在主菜单上时，我们需要显示下拉菜单。为此，我们需要设置nav ul li:hover > ul的样式，如下面的代码所示：

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

上面的代码片段将下拉菜单设置为显示状态（display: inherit）。

示例

示例一：https://codepen.io/PaulHBrennan/pen/rcaKj

示例二：https://codepen.io/javpet/pen/WQWrOq

以上两个示例中，第一个示例是一个基本示例，第二个示例是一个更加完善的示例，例如在更改窗口大小时，菜单的布局会随之改变。希望这些示例可以帮助您更好地理解如何使用纯CSS实现下拉导航栏。