css一级二级菜单

CSS一级二级菜单
菜单是网站和应用程序的常见组件之一。 CSS 提供了强大的方式来控制菜单的样式和行为，可以创建各种类型的菜单，包括一级、二级和多级菜单。
一级菜单
一级菜单是最简单和最常见的菜单类型。它通常是一个水平的列表，每个项目都是一个链接。以下是一个简单的一级菜单的HTML代码和CSS样式：

html
<ul>
  <li><a href="#">Home</a></li>
  <li><a href="#">About</a></li>
  <li><a href="#">Contact</a></li>
</ul>
<br>
<pre>
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
<br>
li {
  display: inline-block;
  margin-right: 20px;
}
<br>
a {
  text-decoration: none;
  color: #333;
}
<br>
a:hover {
  color: #f00;
} 

在上面的代码中，我们设置了 ul 的样式，包括去掉了列表标记的样式。通过设置 li 的 display 属性为 inline-block，它们可以水平放置。我们还添加了一些间距和a标签的颜色，当鼠标悬停时，a 标签的颜色会改变。
二级菜单
二级菜单通常在一级菜单的下拉列表中，鼠标悬停在一级菜单项上时，二级菜单出现。以下是一个使用HTML和CSS创建的简单二级菜单：
html

• Home
• About
  • Company
  • Culture
  • Team
• Contact
  • Phone
  • Email

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
<br>
li {
  display: inline-block;
  margin-right: 20px;
  position: relative;
}
<br>
li ul {
  display: none;
  position: absolute;
  top: 30px;
  left: 0;
}
<br>
li:hover > ul {
  display: block;
}
<br>
a {
  text-decoration: none;
  color: #333;
}
<br>
a:hover {
  color: #f00;
} 

在上面的代码中，我们首先定义了一级菜单的样式。当鼠标悬停在一级菜单项上时，我们使用 li:hover > ul 选择器来使二级菜单显示。我们还设置了二级菜单的样式，包括使用 position 属性来使其定位在正确的位置。
总结
CSS 提供了多种类型的菜单样式选择，我们可以使用 ul 和 li 元素来实现不同类型的菜单。通过精细的样式设计，我们可以让菜单看起来漂亮并方便用户使用。