纯css下拉菜单详解

分类：CSS日期：2008-11-10 星期一

下拉菜单由于实用，所以受到人们的欢迎。下拉菜单通常是由javascript来实现的，也应该由 javascript 来实现，因为这属于行为层范围。然而大家知道，使用 CSS 的 :hover 伪类也可以制作下拉菜单，比起javascript来，使用CSS制作更简单，且更容易理解。但由于 IE6 只有 a 标签支持 :hover 伪类，所以又给这种带来了“阻碍”。不过大家还是比较喜欢纯CSS下拉菜单，现在我们就利用 IE条件注释来制作一个纯CSS下拉菜单。为了便于理解，选择了很很简单的代码，至于更复杂的，大家可以触类旁通、举一反三。

XHTML代码：

<dl>
<dt>一级菜单</dt>
<dd>二级菜单</dd>
<dd>二级菜单</dd>
<dd>二级菜单</dd>
</dl>

CSS代码：

dd{
display:none;
}
dl:hover dd{
display:block;
}

查看效果

在 IE7 和 FF 等标准浏览器中，下拉菜单可以正常使用，但 IE6 中却没有效果。

既然 IE6 只有 a 标签才支持 :hover，那就加上 a 标签。XHTML代码改写成:

<!--[if lte IE 6]><a href="#"><![endif]-->
<dl>
<dt>一级菜单</dt>
<dd>二级菜单</dd>
<dd>二级菜单</dd>
<dd>二级菜单</dd>
</dl>
<!--[if lte IE 6]></a><![endif]-->

CSS代码改写成：

dd{
display:none;
}
dl:hover dd,a:hover dd{
display:block;
}

查看效果

然而在 IE6 中依然没有效果，为什么呢？难道代码有错？其实代码没有错，这是 IE6 的 BUG，关于次 BUG 你可以参看《:hover伪类在IE6中的BUG》。可以加上一些属性来消除此 BUG，这里给 a:hover 加 border:0，即CSS代码再次改写成：

dd{
display:none;
}
dl:hover dd,a:hover dd{
display:block;
}
a:hover{
border:0;
}

查看效果

此时在 IE6 中鼠标移动到上面下拉菜单出现了。

然而给每个菜单加上连接的时候，IE6 里又不行了，为什么？为什么？不知道。。。不过再给 IE条件注释里的 a 标签里再套上一个表格，即XHTML代码改写成如下：

<!--[if lte IE 6]><a href="#"><table><tr><td><![endif]-->
<dl>
<dt><a href="#">一级菜单</a></dt>
<dd><a href="#">二级菜单</a></dd>
<dd><a href="#">二级菜单</a></dd>
<dd><a href="#">二级菜单</a></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

查看效果

此时，下拉菜单在 IE6 里没有问题了。

更多例子：

标签： , ,

上一篇：IE条件注释续
下一篇：制作半透明效果

相关文章

10 条评论

  1. 小小, 发表于 2008-12-5

    学习了,请问下这个算是HACK吗?

    小小 回复于 12月 5th, 2008：

    还有个疑问,我的想法是把鼠标移到DT上显示DD,可是
    dt:hover dd,a:hover dd{
    display:block;
    }
    我这样写怎么没效果呢,为什么非要是DL:HOVER.......
    难道因为DD属于DL
    DD不属于DT,
    有点晕,不知道您明白我的意思了没?

    青色 回复于 12月 7th, 2008：

    1、当然算 HACK 了。
    2、我也试过，dt:hover dd 确实没有效果，我想应该是兄弟元素和父元素的问题吧。dd、dt是兄弟元素关系，而dd与dl是子元素与父元素关系。似乎只有父元素才能触发子元素显示。

  2. 温柔的大海 » 纯css下拉, 发表于 2008-12-4

    [...] 纯css下拉菜单详解 | 青色’s Blog: [...]

  3. csser, 发表于 2008-11-18

    明白了！

    qingse 回复于 12月 7th, 2008：

    呵呵。。。

  4. hzhjun, 发表于 2008-11-17

    这几个下拉菜单很不错，俺收藏啦，谢谢！

    青色 回复于 11月 18th, 2008：

    你的网站和我友情链接的一个很像。。。

  5. 电器维修, 发表于 2008-11-12

    文章不错啊！看完了给你留个脚印。顺便也留下我网站的链接。(*^__^*) 嘻嘻……没办法这年头做网站很难啊

    青色 回复于 11月 13th, 2008：

    是啊，不容易。。。

发表留言