欢迎访问 夜阑小雨 我的学习碎片档案,这里记录了我的学习内容和工作中经验,希望给您带去帮助。

纯css下拉菜单详解

javascript 夜阑小雨 503℃ 0评论

下拉菜单由于实用,所以受到人们的欢迎。下拉菜单通常是由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 里没有问题了。

更多例子:

转载请注明:夜阑小雨 » 纯css下拉菜单详解

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址