基础 CSS 厨房水槽菜单

在网页开发中，水平或垂直导航菜单是很常见的一个元素。本文介绍了如何使用基础 CSS 属性创建一个简单的水槽导航菜单。

HTML 结构

首先，我们需要把菜单项包含在一个容器元素中，例如一个无序列表（ul），每个菜单项用列表项（li）包含。

<ul class="sink-menu">
  <li><a href="#">菜单项 1</a></li>
  <li><a href="#">菜单项 2</a></li>
  <li><a href="#">菜单项 3</a></li>
  <li><a href="#">菜单项 4</a></li>
</ul>

CSS 样式

为了样式化菜单，我们需要定义以下 CSS 属性：

1. 清除默认样式
2. 定义菜单项的布局
3. 定义鼠标悬停状态
4. 定义当前活动状态

以下是完整的 CSS 样式代码：

/* 清除默认样式 */
.sink-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 定义菜单项的布局 */
.sink-menu li {
  display: inline-block;
  margin-right: 1em;
}

/* 定义鼠标悬停状态 */
.sink-menu li:hover a {
  color: #333;
  background-color: #ddd;
}

/* 定义当前活动状态 */
.sink-menu .active a {
  color: #fff;
  background-color: #333;
}

我们给 .sink-menu 设置了一个 list-style: none;，这会去掉默认的列表样式。然后我们给 .sink-menu li 定义了 display: inline-block;，使得菜单项呈现水平排列，并且使用 margin-right: 1em; 给每个菜单项设置间距。

接着我们定义了 .sink-menu li:hover a ，这个样式将应用于鼠标悬停在菜单项上时。我们为链接定义了一些增强的样式，例如新的文字颜色和背景色。最后，我们定义了 .sink-menu .active a，这个样式将应用于当前被选中的菜单项。

完整代码

以下是完整的 HTML 和 CSS 代码：

<ul class="sink-menu">
  <li><a href="#">菜单项 1</a></li>
  <li><a href="#">菜单项 2</a></li>
  <li><a href="#" class="active">菜单项 3</a></li>
  <li><a href="#">菜单项 4</a></li>
</ul>

/* 清除默认样式 */
.sink-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 定义菜单项的布局 */
.sink-menu li {
  display: inline-block;
  margin-right: 1em;
}

/* 定义鼠标悬停状态 */
.sink-menu li:hover a {
  color: #333;
  background-color: #ddd;
}

/* 定义当前活动状态 */
.sink-menu .active a {
  color: #fff;
  background-color: #333;
}

结论

以上是如何使用基础 CSS 属性创建一个简单的水槽导航菜单，你可以用它作为你网站的基础菜单。你也可以按照你的需要来定制它，例如改变字体颜色、背景颜色等。

一些细节值得注意：我们可以使用这种菜单来呈现日常使用的水槽菜单（例如导航、页脚等）。尽管这种菜单应用简单，但是它可以扩展到更复杂的菜单，例如垂直菜单、下拉菜单等等。