css二级横向导航代码

CSS二级横向导航是一种常见的网页设计元素，用于在主导航下方展示子菜单项。这种设计可以提高网站的导航效率和用户体验。下面是一个简单的CSS二级横向导航的示例代码：

HTML结构

<nav class="main-nav">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
      <ul class="sub-menu">
        <li><a href="#">Team</a></li>
        <li><a href="#">History</a></li>
      </ul>
    </li>
    <li><a href="#">Services</a>
      <ul class="sub-menu">
        <li><a href="#">Web Design</a></li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

CSS样式

/* 基础导航样式 */
.main-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.main-nav li {
  position: relative;
}

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

.main-nav a:hover {
  background-color: #f1f1f1;
}

/* 子菜单样式 */
.sub-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  min-width: 160px;
}

.sub-menu li {
  width: 100%;
}

.sub-menu a {
  padding: 10px 20px;
}

/* 显示子菜单 */
.main-nav li:hover .sub-menu {
  display: block;
}

解释

HTML结构：使用嵌套的<ul>和<li>元素来创建主菜单和子菜单。
CSS样式：
- .main-nav ul：设置主菜单为水平排列，并去除默认的列表样式。
- .main-nav li：设置每个菜单项为相对定位，以便子菜单可以绝对定位在其下方。
- .sub-menu：设置子菜单为隐藏状态，并使用绝对定位使其在父菜单项下方显示。
- li:hover .sub-menu：当鼠标悬停在父菜单项上时，显示子菜单。