纯css下拉菜单详解

全栈程序员-用户IM • 2022年11月3日下午1:36 • 未分类

大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46，售后保障稳定

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

Jetbrains全家桶1年46，售后保障稳定

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

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

XHTML 代码：

CSS 代码：

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

查看Demo

在 IE7 和 FF 等标准浏览器中，下拉菜单可以正常使用，但 IE6 中却没有效果。既然 IE6 只有 a 标签才支持 :hover，那就加上 a 标签。XHTML 代码改写成:

CSS 代码改写成：

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

查看Demo

然而在 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]-->

查看Demo

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