使用CSS做出一个嵌套导航.

使用CSS做出一个嵌套导航，主要需要以下几个步骤：

1. HTML结构

在HTML中，我们需要使用嵌套的列表结构来建立导航。具体代码如下：

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li>
      <a href="#">产品</a>
      <ul>
        <li><a href="#">产品1</a></li>
        <li><a href="#">产品2</a></li>
      </ul>
    </li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</nav>

在上面的代码中，我们使用nav元素来定义整个导航条，使用ul和li元素来定义嵌套列表。注意到第二个列表项中包含一个嵌套的列表，这就形成了嵌套导航。

2. CSS样式

接下来我们需要使用CSS来为导航条添加样式。具体代码如下：

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  position: relative;
}

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

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

nav ul li a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  line-height: 60px;
  padding: 0 15px;
}

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

nav ul ul {
  display: none;
  position: absolute;
  top: 60px;
  background-color: #333;
  padding: 0;
}

nav ul ul li {
  display: block;
  margin: 0;
  width: 200px;
}

nav ul ul li a {
  line-height: 40px;
  padding: 0 10px;
}

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

在上面的代码中，我们为整个导航条的ul元素添加了一些基本样式，比如去除了默认的列表样式，设置了背景颜色。我们还使用了position: relative来允许子元素使用position: absolute相对于父元素进行定位。

对于每个li元素，我们设置了display: inline-block来使每个菜单项水平排列。当鼠标悬停时，我们使用hover来改变菜单项的背景颜色，从而提高交互性。

当一个菜单项包含子菜单时，我们使用ul元素来创建子菜单的列表，并设置display: none来隐藏子菜单。当鼠标悬停在一个菜单项上时，我们使用li:hover > ul来显示子菜单。

我们还要为子菜单添加一些样式，比如使用position: absolute相对于父元素进行定位，设置背景颜色等等。

3. 示例说明

以下是两个不同的示例，演示了不同类型的嵌套导航。

示例1：水平导航

在这个示例中，我们使用了一个水平的导航条，所有菜单项都水平排列在一行。当鼠标悬停在某个菜单项上时，它下面的子菜单会弹出。

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li>
      <a href="#">产品</a>
      <ul>
        <li><a href="#">产品1</a></li>
        <li><a href="#">产品2</a></li>
      </ul>
    </li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</nav>

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  position: relative;
}

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

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

nav ul li a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  line-height: 60px;
  padding: 0 15px;
}

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

nav ul ul {
  display: none;
  position: absolute;
  top: 60px;
  background-color: #333;
  padding: 0;
}

nav ul ul li {
  display: block;
  margin: 0;
  width: 200px;
}

nav ul ul li a {
  line-height: 40px;
  padding: 0 10px;
}

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

示例2：垂直导航

在这个示例中，我们使用了一个垂直的导航条，所有菜单项都垂直排列在一列。当鼠标悬停在某个菜单项上时，它右边的子菜单会弹出。

<nav>
  <ul>
    <li><a href="#">首页</a></li>
    <li>
      <a href="#">产品</a>
      <ul>
        <li><a href="#">产品1</a></li>
        <li><a href="#">产品2</a></li>
      </ul>
    </li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</nav>

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  position: relative;
}

nav ul li {
  display: block;
  margin-bottom: 5px;
}

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

nav ul li a {
  display: block;
  color: #fff;
  text-decoration: none;
  font-size: 16px;
  line-height: 40px;
  padding: 0 15px;
}

nav ul li:hover > ul {
  display: block;
  position: absolute;
  top: 0;
  left: 100%;
  width: 200px;
  background-color: #333;
  padding: 0;
}

nav ul ul {
  display: none;
}

nav ul ul li {
  display: block;
  margin: 0;
  width: 200px;
}

nav ul ul li a {
  line-height: 40px;
  padding: 0 10px;
}

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

在这个示例中，我们使用了display: block将菜单项排成一列。我们还使用margin-bottom来添加菜单项之间的间距。当鼠标悬停在某个菜单项上时，我们使用position: absolute和left: 100%将子菜单定位在菜单项右边。