CSS横向下拉菜单(兼容IE6)

下面是关于CSS横向下拉菜单的完整攻略。

什么是CSS横向下拉菜单？

CSS横向下拉菜单是指通过CSS样式，实现的一种横向排列的菜单，并且可以在鼠标悬浮或点击某一菜单项时，出现下拉菜单的效果。这种菜单在网页设计中比较常见，因为横向排列比竖向排列更容易呈现出菜单的整体感。

实现CSS横向下拉菜单

以下是CSS横向下拉菜单的实现步骤：

1. 首先，在HTML中创建菜单的结构，并在其中加入样式类名，如下所示：

<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">新闻</a>
    <ul>
      <li><a href="#">国内</a></li>
      <li><a href="#">国际</a></li>
    </ul>
  </li>
  <li><a href="#">产品</a></li>
  <li><a href="#">关于我们</a></li>
</ul>

1. 接着，在样式表中添加以下CSS样式：

.nav li {
  float: left; /*横向排列*/
  position: relative; /*使子菜单相对于父菜单定位*/
}
.nav li ul {
  display: none; /*隐藏子菜单*/
  position: absolute; /*使子菜单绝对定位*/
  top: 100%; /*使子菜单相对于父菜单向下定位*/
  left: 0; /*使子菜单相对于父菜单向左定位*/
}
.nav li:hover > ul {
  display: block; /*鼠标悬浮时，显示子菜单*/
}

其中，.nav li用于选择菜单项，并使其横向排列。.nav li ul选择子菜单，并设置了其初始时的隐藏和绝对定位属性。.nav li:hover > ul选择鼠标悬浮的菜单，并设置其子菜单的显示属性。

1. 如果想要兼容IE6，可以使用以下CSS样式：

* html .nav li a {
  display: inline-block; /*使链接显示为块级元素*/
}
* html .nav li ul {
  margin-top: 1px; /*处理IE6下菜单高度重叠问题*/
}

这里使用了CSS Hack，即针对IE6浏览器特定的CSS代码。其中，* html是IE6浏览器特有选择器的写法，.nav li a和.nav li ul是选择菜单项和子菜单的样式。

示例说明

下面是两条实际应用的例子，以帮助更好地理解CSS横向下拉菜单的使用：

示例1：带有icon的菜单

html结构如下：

<ul class="nav">
  <li><a href="#"><i class="fa fa-home"></i>首页</a></li>
  <li><a href="#"><i class="fa fa-newspaper"></i>新闻</a>
    <ul>
      <li><a href="#">国内</a></li>
      <li><a href="#">国际</a></li>
    </ul>
  </li>
  <li><a href="#"><i class="fa fa-product"></i>产品</a></li>
  <li><a href="#"><i class="fa fa-info-circle"></i>关于我们</a></li>
</ul>

其中，每个菜单项均有一个icon字体图标，以增强视觉效果。

CSS样式如下：

.nav li a {
  position: relative;
  padding-left: 20px;
  line-height: 50px;
}
.nav li a i {
  position: absolute;
  left: 0;
}

其中，.nav li a选择菜单项，设置了相对定位和左侧内边距。.nav li a i选择菜单项中的icon，设置了绝对定位和左侧位置。

示例2：带有背景色的菜单

html结构如下：

<ul class="nav">
  <li><a href="#">首页</a></li>
  <li><a href="#">新闻</a>
    <ul>
      <li><a href="#">国内</a></li>
      <li><a href="#">国际</a></li>
    </ul>
  </li>
  <li><a href="#">产品</a></li>
  <li><a href="#">关于我们</a></li>
</ul>

CSS样式如下：

.nav li a {
  background-color: #f7f7f7;
  padding: 10px;
  border-radius: 5px 5px 0 0;
}
.nav li:hover > a {
  background-color: #e5e5e5;
}
.nav li ul {
  background-color: #e5e5e5;
  border-radius: 0 0 5px 5px;
}

其中，.nav li a选择菜单项，设置了背景色、内边距和圆角边框。.nav li:hover > a选择鼠标悬浮的菜单项，并设置了另一种背景颜色。.nav li ul选择子菜单，设置了背景色和底部圆角边框。