css实现菜单-前端问答-PHP中文网

本篇文章介绍了如何使用 CSS 实现一个简单的菜单。CSS（层叠样式表）是一种在网页上布置和显示的样式语言，它的主要作用是为 HTML 文档添加样式和布局。在这个菜单例子中，我们将使用 CSS 来控制菜单的样式和布局。

首先，我们需要建立 HTML 结构，包括一个 <ul> 元素和一些个 <li> 元素。这些元素将组成我们的菜单，每个 <li> 元素就是一个菜单项。例如：

<ul>
  <li><a href="#">首页</a></li>
  <li><a href="#">产品</a></li>
  <li><a href="#">关于我们</a></li>
  <li><a href="#">联系我们</a></li>
</ul>

登录后复制

上面的 HTML 结构将生成如下的菜单：

CSS实现菜单-1

接下来，我们使用 CSS 为菜单添加样式。

首先，我们为 <ul> 元素设置了一些基本样式：

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

登录后复制

这将使菜单列表不显示默认的小圆点，以及去掉默认的外边距和内边距。

下一步，我们为每个菜单项添加一些样式，并使用 float 属性将它们排列在一行：

li {
  float: left;
}

li a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

登录后复制

这将使每个菜单项排列在菜单条的一行上，并添加了样式，例如，将链接变成一个块元素，设置内边距、文本装饰以及颜色和字体。

最后，我们将为菜单条应用一些样式：

nav {
  background-color: #f1f1f1;
}

nav ul {
  overflow: auto;
  width: 100%;
}

nav li {
  float: left;
}

nav a {
  display: block;
  padding: 8px 16px;
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

nav a:hover {
  background-color: #ddd;
  color: #333;
}

登录后复制

我们使用了 background-color 属性为菜单条设置了背景颜色，并使用 overflow 属性使菜单条可以滚动。此外，我们还设置了菜单项的背景和悬停样式。

最终，我们的 CSS 实现的菜单如下所示：

CSS实现菜单-2