CSS 制作二级下拉导航菜单

2023-10-13 01:44:14

CSS 制作二级下拉导航菜单

1. 准备工作

在开始制作二级下拉导航菜单之前，我们需要先准备一些必要的工具和材料。

HTML 代码

<ul id="nav">
  <li><a href="#">一级菜单</a>
    <ul>
      <li><a href="#">二级菜单</a></li>
      <li><a href="#">二级菜单</a></li>
      <li><a href="#">二级菜单</a></li>
    </ul>
  </li>
  <li><a href="#">一级菜单</a>
    <ul>
      <li><a href="#">二级菜单</a></li>
      <li><a href="#">二级菜单</a></li>
      <li><a href="#">二级菜单</a></li>
    </ul>
  </li>
  <li><a href="#">一级菜单</a>
    <ul>
      <li><a href="#">二级菜单</a></li>
      <li><a href="#">二级菜单</a></li>
      <li><a href="#">二级菜单</a></li>
    </ul>
  </li>
</ul>

CSS 代码

#nav {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #000000;
}

#nav li {
  display: inline-block;
  width: 100px;
  height: 50px;
  text-align: center;
  vertical-align: middle;
  border-right: 1px solid #000000;
}

#nav li a {
  text-decoration: none;
  color: #000000;
}

#nav li ul {
  display: none;
  position: absolute;
  top: 50px;
  left: 0;
  width: 100px;
}

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

2. 制作一级菜单

首先，我们需要制作一级菜单。一级菜单就是导航菜单的最顶层菜单。我们可以使用 HTML 代码中的 <ul> 标签和 <li> 标签来制作一级菜单。

<ul id="nav">
  <li><a href="#">一级菜单</a></li>
  <li><a href="#">一级菜单</a></li>
  <li><a href="#">一级菜单</a></li>
</ul>

3. 制作二级菜单

接下来，我们需要制作二级菜单。二级菜单就是一级菜单下的子菜单。我们可以使用 HTML 代码中的 <ul> 标签和 <li> 标签来制作二级菜单。

<ul id="nav">
  <li><a href="#">一级菜单</a>
    <ul>
      <li><a href="#">二级菜单</a></li>
      <li><a href="#">二级菜单</a></li>
      <li><a href="#">二级菜单</a></li>
    </ul>
  </li>
  <li><a href="#">一级菜单</a>
    <ul>
      <li><a href="#">二级菜单</a></li>
      <li><a href="#">二级菜单</a></li>
      <li><a href="#">二级菜单</a></li>
    </ul>
  </li>
  <li><a href="#">一级菜单</a>
    <ul>
      <li><a href="#">二级菜单</a></li>
      <li><a href="#">二级菜单</a></li>
      <li><a href="#">二级菜单</a></li>
    </ul>
  </li>
</ul>

4. 设置样式

最后，我们需要设置样式来美化导航菜单。我们可以使用 CSS 代码中的 #nav、#nav li、#nav li a、#nav li ul 和 #nav li:hover ul 等选择器来设置样式。

#nav {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #000000;
}

#nav li {
  display: inline-block;
  width: 100px;
  height: 50px;
  text-align: center;
  vertical-align: middle;
  border-right: 1px solid #000000;
}

#nav li a {
  text-decoration: none;
  color: #000000;
}

#nav li ul {
  display: none;
  position: absolute;
  top: 50px;
  left: 0;
  width: 100px;
}

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

5. 测试导航菜单

现在，我们已经制作好了二级下拉导航菜单。我们可以通过打开浏览器并输入以下代码来测试导航菜单。

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <ul id="nav">
    <li><a href="#">一级菜单</a>
      <ul>
        <li><a href="#">二级菜单</a></li>
        <li><a href="#">二级菜单</a></li>
        <li><a href="#">二级菜单</a></li>
      </ul>
    </li>
    <li><a href="#">一级菜单</a>
      <ul>
        <li><a href="#">二级菜单</a></li>
        <li><a href="#">二级菜单</a></li>
        <li><a href="#">二级菜单</a></li>
      </ul>
    </li>
    <li><a href="#">一级菜单</a>
      <ul>
        <li><a href="#">二级菜单</a></li>
        <li><a href="#">二级菜单</a></li>
        <li><a href="#">二级菜单</a></li>
      </ul>
    </li>
  </ul>
</body>
</html>