css写菜单：简洁注释版

下面是"css写菜单：简洁注释版"的完整攻略：

1. 选择菜单类型

首先，要选择菜单的类型，常见的菜单类型有水平菜单和垂直菜单两种。可以根据网站的布局和需求选择合适的菜单类型。

2. 准备 HTML 结构

在 HTML 文件中，我们通常使用<ul>和<li>标签来构建菜单，使用<a>标签作为链接。示例如下：

<ul>
  <li><a href="#">菜单1</a></li>
  <li><a href="#">菜单2</a></li>
  <li><a href="#">菜单3</a></li>
  <li><a href="#">菜单4</a></li>
  <li><a href="#">菜单5</a></li>
</ul>

3. 使用 CSS 样式

接下来，我们要使用 CSS 样式来美化菜单。首先，我们要去掉默认样式，可以这样写：

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

这里的list-style: none用于去掉列表的默认符号，margin: 0和padding: 0用于去掉菜单的边距和内边距。

接着，我们可以为菜单添加样式，包括背景颜色、字体颜色、鼠标悬停效果等。示例如下：

ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #f1f1f1;
  text-align: center;
}

li {
  display: inline-block;
  margin: 0 10px;
}

li a {
  display: block;
  padding: 10px 20px;
  color: #333;
  text-decoration: none;
}

li a:hover {
  background-color: #333;
  color: #fff;
}

这里的background-color和text-align用于设定菜单的背景颜色和对齐方式，display: inline-block用于使菜单项在同一行显示，margin用于设定菜单项之间的间距，padding用于设定菜单项的内边距，color用于设定菜单项的字体颜色，text-decoration用于去掉链接下划线，:hover用于设定菜单项鼠标悬停后的样式。

4. 完善 CSS 样式

最后，我们可以根据实际需求进一步完善 CSS 样式。例如，可以添加子菜单，使菜单更加多样化。示例如下：

<ul>
  <li><a href="#">菜单1</a></li>
  <li><a href="#">菜单2</a></li>
  <li><a href="#">菜单3</a>
    <ul>
      <li><a href="#">子菜单1</a></li>
      <li><a href="#">子菜单2</a></li>
      <li><a href="#">子菜单3</a></li>
    </ul>
  </li>
  <li><a href="#">菜单4</a></li>
  <li><a href="#">菜单5</a></li>
</ul>

ul ul {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  z-index: 1;
}

li:hover ul {
  display: block;
}

li:hover li {
  float: none;
}

li:hover a {
  background-color: #333;
  color: #fff;
}

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

这里的ul ul用于设定子菜单的样式，display: none用于让子菜单默认不显示，position: absolute用于使子菜单相对于菜单项定位，background-color用于设定子菜单的背景颜色，z-index用于设定子菜单的层级。

li:hover ul用于让鼠标悬停在菜单项上时显示子菜单，li:hover li用于取消子菜单项的浮动效果，li:hover a和li:hover li a:hover用于设定鼠标悬停后的样式。

以上是"css写菜单：简洁注释版"的完整攻略，希望对你有所帮助。