JS+CSS实现六级网站导航主菜单效果

一、目标与需求

我们的目标是实现六级网站导航主菜单效果，需求如下：

1. 实现简洁明了的导航栏效果；
2. 支持鼠标移入触发下拉菜单；
3. 支持二级、三级、四级、五级、六级菜单的显示。

二、HTML结构

<nav class="nav-menu">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品中心</a>
      <ul>
        <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>
    </li>
    <li><a href="#">解决方案</a>
      <ul>
        <li><a href="#">方案1</a></li>
        <li><a href="#">方案2</a></li>
        <li><a href="#">方案3</a>
          <ul>
            <li><a href="#">方案3.1</a></li>
            <li><a href="#">方案3.2</a>
              <ul>
                <li><a href="#">方案3.2.1</a></li>
                <li><a href="#">方案3.2.2</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">服务支持</a></li>
    <li><a href="#">新闻中心</a></li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

三、CSS样式

样式中包含了导航栏的基本样式定义、鼠标悬停状态的样式定义、下拉菜单样式定义等。

.nav-menu {
  height: 50px;
  background-color: #00bfff;
  position: relative;
}

.nav-menu ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-menu ul li {
  float: left;
  position: relative;
}

.nav-menu ul li a {
  display: block;
  line-height: 50px;
  padding: 0 20px;
  color: #fff;
  text-decoration: none;
}

.nav-menu ul li ul {
  position: absolute;
  left: 0;
  top: 100%;
  width: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  z-index: 100;
  display: none;
}

.nav-menu ul li:hover > ul {
  display: block;
}

.nav-menu ul li ul li {
  float: none;
  position: relative;
}

.nav-menu ul li ul li a {
  display: block;
  line-height: 30px;
  padding: 0 20px;
  color: #333;
  text-decoration: none;
}

.nav-menu ul li ul li ul {
  position: absolute;
  left: 100%;
  top: 0;
  width: 200px;
  background-color: #fff;
  border: 1px solid #ccc;
  z-index: 200;
  display: none;
}

.nav-menu ul li ul li:hover > ul {
  display: block;
}

.nav-menu ul li ul li ul li {
  float: none;
  position: relative;
}

.nav-menu ul li ul li ul li a {
  display: block;
  line-height: 30px;
  padding: 0 20px;
  color: #333;
  text-decoration: none;
}

四、JS交互

JS负责监听鼠标事件，根据事件来切换下拉菜单的显示和隐藏状态。

$(function() {
  $('.nav-menu ul li').mouseover(function() {
    $(this).children('ul').stop().slideDown();
  }).mouseout(function() {
    $(this).children('ul').stop().slideUp();
  });
});

以上就是JS+CSS实现六级网站导航主菜单效果的完整攻略。

示例说明：

1. 在以上HTML结构中，每一个li标签都代表了一个菜单项，ul标签则代表了对应菜单项的下拉菜单（如果存在）。在下拉菜单中，同样可以放置li标签和子菜单的ul标签。
2. 对于鼠标移入和移出事件，我们分别使用jQuery的mouseover和mouseout方法来监听，并在其内部操作菜单下拉框的CSS和状态。