纯 CSS 水平菜单

在网页设计中，水平菜单作为导航的一种方式，经常被用到。通过使用 CSS，我们可以制作出漂亮、有趣、交互性好的菜单，而不需要依赖 JavaScript。

基本结构

制作水平菜单，需要有一些基本结构，如下：

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

其中，<nav> 表示导航栏，<ul> 表示无序列表，<li> 表示列表项，<a> 表示链接。

基本样式

下面是一个基本的样式，可以实现简单的水平菜单：

nav {
  background-color: #333;
  height: 50px;
}

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

nav li {
  float: left;
}

nav a {
  color: #fff;
  display: block;
  padding: 0 15px;
  line-height: 50px;
}

nav a:hover {
  background-color: #555;
}

其中，background-color 设置导航栏背景颜色，height 设置导航栏高度，list-style 去除无序列表标志，float 实现横排，color、padding、line-height 等属性则是常规的样式。

更多样式

除了基本样式，还可以实现更多的效果。下面是一些例子：

下划线效果

nav a {
  position: relative;
}

nav a:after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 50%;
  transition: all 0.2s ease;
}

nav a:hover:after {
  width: 100%;
  left: 0;
}

其中，position: relative 设置链接的相对定位，nav a:after 伪元素实现下划线效果，transition 实现过渡动画。

半透明背景

nav a {
  position: relative;
}

nav a:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: opacity 0.2s ease;
}

nav a:hover:before {
  opacity: 0.3;
}

其中，position: relative 设置链接的相对定位，nav a:before 伪元素实现半透明背景效果，opacity 实现透明度控制，z-index 设置伪元素在下层。

按钮背景

nav a {
  position: relative;
}

nav a:before {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: -20px;
  transition: all 0.2s ease;
}

nav a:hover:before {
  width: calc(100% + 40px);
}

其中，position: relative 设置链接的相对定位，nav a:before 伪元素实现按钮背景效果，width 使用 calc() 函数计算宽度。需要注意的是，calc() 函数的用法是：calc(表达式)，表达式中支持加、减、乘、除等运算符，可以使用百分比、像素等数值单位。

总结

使用纯 CSS 制作水平菜单，可以实现丰富多样的效果，具有良好的交互性和可维护性。以上介绍的只是冰山一角，还有更多效果等待你的发掘和实现。

以上的代码片段以markdown格式返回如下:

# 纯 CSS 水平菜单

在网页设计中，水平菜单作为导航的一种方式，经常被用到。通过使用 CSS，我们可以制作出漂亮、有趣、交互性好的菜单，而不需要依赖 JavaScript。

## 基本结构

制作水平菜单，需要有一些基本结构，如下：

```HTML
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

其中，<nav> 表示导航栏，<ul> 表示无序列表，<li> 表示列表项，<a> 表示链接。

基本样式

下面是一个基本的样式，可以实现简单的水平菜单：

nav {
  background-color: #333;
  height: 50px;
}

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

nav li {
  float: left;
}

nav a {
  color: #fff;
  display: block;
  padding: 0 15px;
  line-height: 50px;
}

nav a:hover {
  background-color: #555;
}

其中，background-color 设置导航栏背景颜色，height 设置导航栏高度，list-style 去除无序列表标志，float 实现横排，color、padding、line-height 等属性则是常规的样式。

更多样式

除了基本样式，还可以实现更多的效果。下面是一些例子：

下划线效果

nav a {
  position: relative;
}

nav a:after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background-color: #fff;
  position: absolute;
  bottom: 0;
  left: 50%;
  transition: all 0.2s ease;
}

nav a:hover:after {
  width: 100%;
  left: 0;
}

其中，position: relative 设置链接的相对定位，nav a:after 伪元素实现下划线效果，transition 实现过渡动画。

半透明背景

nav a {
  position: relative;
}

nav a:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: #fff;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: opacity 0.2s ease;
}

nav a:hover:before {
  opacity: 0.3;
}

其中，position: relative 设置链接的相对定位，nav a:before 伪元素实现半透明背景效果，opacity 实现透明度控制，z-index 设置伪元素在下层。

按钮背景

nav a {
  position: relative;
}

nav a:before {
  content: "";
  display: block;
  width: 0;
  height: 100%;
  background-color: #fff;
  position: absolute;
  top: 0;
  left: -20px;
  transition: all 0.2s ease;
}

nav a:hover:before {
  width: calc(100% + 40px);
}

其中，position: relative 设置链接的相对定位，nav a:before 伪元素实现按钮背景效果，width 使用 calc() 函数计算宽度。需要注意的是，calc() 函数的用法是：calc(表达式)，表达式中支持加、减、乘、除等运算符，可以使用百分比、像素等数值单位。

总结

使用纯 CSS 制作水平菜单，可以实现丰富多样的效果，具有良好的交互性和可维护性。以上介绍的只是冰山一角，还有更多效果等待你的发掘和实现。