一起CSS

当前位置:一起CSS > CSS > 文章正文

纯css下拉菜单详解

日期:2008-11-10 分类:CSS

下拉菜单由于实用,所以受到人们的欢迎。下拉菜单通常是由 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; }

查看Demo

在 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; }

查看Demo

然而在 IE6 中依然没有效果,为什么呢?难道代码有错?其实代码没有错,这是 IE6BUG,关于次 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 里没有问题了。

更多例子:

查看:2,122 评论:12 标签:,,,

相关日志

共有 12 条评论

发表留言

请言之有物,无意义留言或只为留链接留言一律不予通过!

提示: 您可以使用一些简单的标签: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

分类

最新日志

最新评论

存档

链接

  • 亚当学院
  • CSS视频教程下载
  • 前沿视频教室
  • 前端爱好者
  • GoodText
  • Kily`s Blog
  • mymickey
  • 秦丰网站策划
  • 奥想创意
  • 我的职业生涯
  • 蜗爱CSS
  • 蜈蚣's Blog
  • web标准学习—小辉博客
  • 十字花匠

© Copyright 2010 一起CSS All Rights Reserved