IE下CSS控制2级菜单显示碰到iframe会隐藏解决办法
IE浏览器下，用CSS控制2级下拉菜单显示时，如果2级菜单包含iframe，移动到iframe中2级菜单会自动隐藏解决办法。在chrome，firefox下不会有此问题。
解决办法如下：用js来控制包含iframe的2级菜单的显示或者隐藏，其他不包含iframe的则用css控制
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<title>IE浏览器下，用CSS控制2级下拉菜单显示时，如果2级菜单包含iframe，移动到iframe中2级菜单会自动隐藏解决办法</title>
<style>
#menu li{float:left;width:200px;position:relative;background:#eeeeee}
#menu li div{display:none;position:absolute;}
#menu li:hover div{display:block;}
/* IE 7 Hack，要不未设置left，top属性会显示在一级菜单的右边，而不是下面*/
*+html #menu li div{position:relative !important;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="menu">
<ul>
<li><a href="#">Menu1</a><div>Menu1子菜单<br />Menu1子菜单<br />Menu1子菜单</div></li>
<li><a href="#">Menu2</a><div><iframe src="about:blank"></iframe></div></li></ul>
</div>
<script>
//判断是否IE6浏览器，IE6 li元素不支持:hover这种伪类，只能用js控制，注意不要判断navigator.usreAgent，IE6不不准
document.write('<!--[if lte IE 6]><script type="text/javascript">window.fixIE6= true<\/script><![endif]-->');
$(function () {
//为IE浏览器则增加style隐藏子菜单容器，并且添加hover事件用于显示/隐藏为iframe的子菜单
if (window.ActiveXObject) {
$(window.fixIE6 ? '#menu div' : '#menu iframe').closest('li').hover(
function () { $('div', this).show(); },
function () { $('div', this).hide(); });
}
});
</script>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：IE下CSS控制2级菜单显示碰到iframe会隐藏解决办法