css导航栏横向二级菜单

这是一款使用jQuery和CSS实现的红色线条横向二级菜单效果。它带有导航菜单，当前选中的菜单项会以个性化的方式显示出来。当鼠标悬停在菜单上时，会显示菜单缺口。这是一个简单的二级导航栏，但实际上，我们通常看到的二级导航栏有很多链接，不仅有垂直的链接，还有很多水平的链接。下面我们将学习如何制作水平的二级导航栏。

首先，我们需要创建一个HTML结构，其中包含一个主菜单和一个子菜单。然后，我们使用CSS样式来设置菜单的外观和布局。最后，我们使用jQuery来添加交互效果，例如当鼠标悬停在菜单上时显示子菜单。

以下是一个简单的示例代码，可以帮助你更好地理解如何创建水平的二级导航栏：

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
      <ul>
        <li><a href="#">Our Team</a></li>
        <li><a href="#">Our Story</a></li>
      </ul>
    </li>
    <li><a href="#">Services</a>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">Graphic Design</a></li>
        <li><a href="#">SEO</a></li>
      </ul>
    </li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  background-color: #333;
}

nav ul li {
  display: inline-block;
  position: relative;
}

nav ul li a {
  display: block;
  padding: 0 10px;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
}

nav ul li:hover > ul {
  display: block;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  background-color: #333;
}

nav ul ul li {
  display: block;
}

nav ul ul li a {
  padding: 0 20px;
  line-height: 30px;
}

$(document).ready(function() {
  $('nav ul li').hover(
    function() {
      $(this).children('ul').slideDown(200);
    },
    function() {
      $(this).children('ul').slideUp(200);
    }
  );
});