一个css与js结合的下拉菜单支持主流浏览器

实现一个下拉菜单可以使用CSS和JavaScript相结合的方法，同时支持主流浏览器的话，可以按以下步骤进行：

第一步：HTML 结构设计

首先，我们需要设计一下 HTML 结构，这里我们使用一个简单的无序列表的结构，每个子菜单项都是一个列表项 li，其中标题部分是一个带有子菜单的 a 标签，子菜单则将放置在一个 div 中：

<ul class="menu">
  <li><a href="#">菜单项 1</a>
    <div class="sub-menu">
      <ul>
        <li><a href="#">子菜单 1-1</a></li>
        <li><a href="#">子菜单 1-2</a></li>
        <li><a href="#">子菜单 1-3</a></li>
      </ul>
    </div>
  </li>
  <li><a href="#">菜单项 2</a>
    <div class="sub-menu">
      <ul>
        <li><a href="#">子菜单 2-1</a></li>
        <li><a href="#">子菜单 2-2</a></li>
        <li><a href="#">子菜单 2-3</a></li>
      </ul>
    </div>
  </li>
</ul>

第二步：CSS 样式设计

接下来是样式设计，我们使用 CSS 样式来设置这个下拉菜单的外观，并且让它可以显示和隐藏，这里给出一个示例样式：

.menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu li {
  float: left;
  position: relative;
}
.menu a {
  display: block;
  padding: 0 10px;
  line-height: 30px;
  text-decoration: none;
}
.menu a:hover {
  background-color: #f90;
  color: #fff;
}
.sub-menu {
  position: absolute;
  top: 30px;
  left: 0;
  display: none;
}
.sub-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.sub-menu li a {
  padding: 5px 10px;
  display: block;
  text-decoration: none;
}
.sub-menu li a:hover {
  background-color: #eee;
}

第三步：JavaScript 编程

最后，我们需要加入 JavaScript 代码来控制下拉菜单的显示与隐藏，这里我们使用 jQuery 库来简化开发，实现的思路是当鼠标悬停在菜单上时，显示对应的子菜单，离开时则隐藏，以下是示例代码：

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

示例说明

示例一

假设我们需要的下拉菜单是一个导航栏，在每个菜单项前需要有相应的图标，同时鼠标悬停时需要有背景色的变化，这种情况下，可以添加以下的 CSS 样式：

.menu a {
  background: url(images/menu_icon.png) no-repeat left center;
  padding-left: 28px;
}
.menu a:hover {
  background-color: #00a3ff;
  color: #fff;
}

同时，对 HTML 结构进行稍微的修改，添加一个 span 元素用于存放图标：

<ul class="menu">
  <li><a href="#"><span class="menu-icon"></span>菜单项 1</a>
    <div class="sub-menu">
      <ul>
        <li><a href="#">子菜单 1-1</a></li>
        <li><a href="#">子菜单 1-2</a></li>
        <li><a href="#">子菜单 1-3</a></li>
      </ul>
    </div>
  </li>
  <li><a href="#"><span class="menu-icon"></span>菜单项 2</a>
    <div class="sub-menu">
      <ul>
        <li><a href="#">子菜单 2-1</a></li>
        <li><a href="#">子菜单 2-2</a></li>
        <li><a href="#">子菜单 2-3</a></li>
      </ul>
    </div>
  </li>
</ul>

对应的 CSS 样式如下：

.menu-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(images/menu_icon.png) no-repeat;
  margin-right: 10px;
}

示例二

在某些场景中，我们需要的是一个带有多级子菜单的下拉菜单，假设有三级子菜单，这种情况下我们需要对 HTML 结构进行调整，例如：

<ul class="menu">
  <li><a href="#">菜单项 1</a>
    <div class="sub-menu">
      <ul>
        <li><a href="#">子菜单 1-1</a></li>
        <li><a href="#">子菜单 1-2</a></li>
        <li><a href="#">子菜单 1-3</a></li>
        <li><a href="#">子菜单 1-4</a>
          <ul>
            <li><a href="#">子菜单 1-4-1</a></li>
            <li><a href="#">子菜单 1-4-2</a></li>
            <li><a href="#">子菜单 1-4-3</a>
              <ul>
                <li><a href="#">子菜单 1-4-3-1</a></li>
                <li><a href="#">子菜单 1-4-3-2</a></li>
                <li><a href="#">子菜单 1-4-3-3</a></li>
              </ul>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </li>
  <li><a href="#">菜单项 2</a>
    <div class="sub-menu">
      <ul>
        <li><a href="#">子菜单 2-1</a></li>
        <li><a href="#">子菜单 2-2</a></li>
        <li><a href="#">子菜单 2-3</a></li>
      </ul>
    </div>
  </li>
</ul>

对应的 CSS 样式仍然可以沿用之前的示例，JavaScript 代码需要进行相应的修改，以支持多级子菜单的显示和隐藏：

$(document).ready(function(){
  $('.menu li').hover(
    function(){
      $('> .sub-menu', this).stop().slideDown(200);
    },
    function(){
      $('> .sub-menu', this).stop().slideUp(200);
    }
  );
  $('.sub-menu li').hover(
    function(){
      $('> ul', this).stop().slideDown(200);
    },
    function(){
      $('> ul', this).stop().slideUp(200);
    }
  );
});

注意，在这里我们使用了直接子元素选择器（>）来选择子菜单元素，同时也需要另外的一组 hover 处理子菜单下的子菜单。

以上就是一个简单的 CSS 与 JS 相结合的下拉菜单的完整攻略，可以根据不同的需求进行相应的修改和扩展。