CSS实现弹出菜单效果中的弹出问题
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xh...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="robots" content="all" />
<title>纯CSS的下拉菜单 支持IE6 IE7 Firefox</title>
<style type="text/css">
*{margin:0;padding:0;}
.menu{font-size:12px;position:relative;z-index:100;}
.menu ul{list-style:none;}
.menu li {float:left;position:relative;}
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}
.menu table {position:absolute; top:0; left:0;}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}
.menu a{display:block;border:1px solid #aaa;background:#cacaca;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}
.menu a:hover{background:#fafafa;color:#000;border:1px solid #000;}
.menu ul ul{}
.menu ul ul li {clear:both;text-align:left;font-size:12px;}
.menu ul ul li a{display:block;width:100px;height:15px;margin:0;border:0;border-bottom:1px solid #858585;}
.menu ul ul li a:hover{border:0;background:#fafafa;border-bottom:1px solid #fff;}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">XHTML/CSS
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">标准</a></li>
<li><a href="#">教程</a></li>
<li><a href="#">技术文章</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">布局教程专题</a></li>
<li><a href="#">CSS菜单</a></li>
<li><a href="#">浏览器兼容</a></li>
<li><a href="#">滚动条相关</a></li>
<li><a href="#">圆角矩形专题</a></li>
<li><a href="#">CSS特效欣赏专题</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">07艺术
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">模板无忧</a></li>
<li><a href="#">模板无忧</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Javascript
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">JSON</a></li>
<li><a href="#">技术文章</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</body></html>
这是一个纯CSS实现的纵向弹处菜单，想请教：代码里边的 <!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->这些代码有什么用？？？
去掉以后，弹出效果就不能实现了。。。。请教高手。
我的是 IE 6，貌似应该可以去掉这部分代码了。。。可去掉后弹出效果就没有了 展开
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="robots" content="all" />
<title>纯CSS的下拉菜单 支持IE6 IE7 Firefox</title>
<style type="text/css">
*{margin:0;padding:0;}
.menu{font-size:12px;position:relative;z-index:100;}
.menu ul{list-style:none;}
.menu li {float:left;position:relative;}
.menu ul ul {visibility:hidden;position:absolute;left:3px;top:23px;}
.menu table {position:absolute; top:0; left:0;}
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}
.menu a{display:block;border:1px solid #aaa;background:#cacaca;padding:2px 10px;margin:3px;color:#fff;text-decoration:none;}
.menu a:hover{background:#fafafa;color:#000;border:1px solid #000;}
.menu ul ul{}
.menu ul ul li {clear:both;text-align:left;font-size:12px;}
.menu ul ul li a{display:block;width:100px;height:15px;margin:0;border:0;border-bottom:1px solid #858585;}
.menu ul ul li a:hover{border:0;background:#fafafa;border-bottom:1px solid #fff;}
</style>
</head>
<body>
<div class="menu">
<ul>
<li><a href="#">XHTML/CSS
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">标准</a></li>
<li><a href="#">教程</a></li>
<li><a href="#">技术文章</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">布局教程专题</a></li>
<li><a href="#">CSS菜单</a></li>
<li><a href="#">浏览器兼容</a></li>
<li><a href="#">滚动条相关</a></li>
<li><a href="#">圆角矩形专题</a></li>
<li><a href="#">CSS特效欣赏专题</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">07艺术
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">模板无忧</a></li>
<li><a href="#">模板无忧</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#">Javascript
<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#">JSON</a></li>
<li><a href="#">技术文章</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</body></html>
这是一个纯CSS实现的纵向弹处菜单，想请教：代码里边的 <!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->这些代码有什么用？？？
去掉以后，弹出效果就不能实现了。。。。请教高手。
我的是 IE 6，貌似应该可以去掉这部分代码了。。。可去掉后弹出效果就没有了 展开
3个回答
展开全部
你看css里面，有li:hover这个伪类，这个伪类，ie7，firefox可以识别，但是ie6不能识别，所以为了只能用a:hover去模拟li:hover。可以看到，用ie6的解析方式，下拉菜单的<ul>是包裹在<a>里面的，而用ie7、firefox的解析方式看，下拉菜单的<ul>则是在<a>之外的，这就是<!--[if lte IE 6]><table><tr><td><![endif]-->这些代码的用处，如果你只想它在ie6下起作用，而不考虑其他浏览器，你可以把由<!--[if IE 7]>和<![endif]-->包裹的内容去掉，在去掉<!--[if lte IE 6]></td></tr></table></a><![endif]--> 的时候，不要把里面包裹的内容去掉，如<!--[if lte IE 6]></td></tr></table></a><![endif]-->，得保留]</td></tr></table></a>
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
这是注解条件式（conditional comment）用来分别 IE 版本的。
这是注解条件式（conditional comment）用来分别 IE 版本的。
参考资料： http://ant4html.blogspot.com/2008/11/blog-post.html
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我想可能是针对两种浏览器做的不同设置和优化。。。。IE6 和IE7程序运行还是有点不一样的。。。7在刚推出的时候很多网站是不兼容的。。。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
