UL、LI 无序列表实现纯CSS网站导航菜单

实现纯CSS网站导航菜单需要使用无序列表（UL）和列表项（LI），将菜单内容放置在列表项中，然后使用CSS样式来控制菜单的呈现。

下面是实现纯CSS网站导航菜单的步骤：

1. 创建无序列表

使用<ul>标签来创建无序列表，将菜单项目放置在每个列表项（<li>）中，如下所示：

<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Services</a></li>
  <li><a href="#">Contact</a></li>
</ul>

在这个例子中，我们创建了一个包含四个菜单项目的无序列表。

2. 添加样式

为菜单添加样式，可以控制它的颜色、背景、文本格式等方面，以下是一些常用的样式：

简单的横向导航菜单

使用以下样式可以将菜单横向排列，并添加一些基本的颜色。

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  overflow: hidden;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

带有下拉菜单的导航菜单

使用以下样式可以在菜单中添加下拉菜单。

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #333;
  overflow: hidden;
}

li {
  float: left;
}

li a, .dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active), .dropdown:hover .dropbtn {
  background-color: #111;
}

.active {
  background-color: #4CAF50;
}

.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown-content a {
  color: black;
  background-color: #f1f1f1;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #ddd;
}

.dropdown:hover .dropdown-content {
  display: block;
}

在这个例子中，我们创建了一个带有下拉菜单的导航菜单。在菜单项“Services”下方有一项下拉菜单。

3. 完成

完成后，你应该拥有一个实现了纯CSS网站导航菜单的页面。在这个页面上，你可以通过使用css样式控制菜单的颜色、字体、大小等效果。