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会隐藏解决办法

评论(0)Web开发网
阅读(222)喜欢(0)JavaScript/Ajax开发技巧