Question

我正在制作一些基于this tutorial的基本下拉菜单。所以它除了IE7之外都是花花公子。当你将鼠标悬停在它上面时，但是当你将鼠标从主元素移动到它下面的那个时，它会再次隐藏。

/* General */
#cssdropdown { position:absolute; right:0px; top:0px; font-size:medium; font-weight:bold; }
#cssdropdown, #cssdropdown ul { list-style: none; }
#cssdropdown, #cssdropdown * { padding: 0; margin: 0; color:Navy; text-decoration:none; }

/* Head links */
#cssdropdown li.headlink 
{ 
    width: 150px; 
    float: left;
    background-color: #e9e9e9; 
    text-align: center; 
    height:35px;
}
#cssdropdown li.headlink a { display: block; padding:7px;} /*7px*/

/* Child lists and links */
#cssdropdown li.headlink ul { display: none; text-align: left; background-color:#e9e9e9; } 
/*#cssdropdown li.headlink:hover ul { display: block; }*/ <--I've tried this via JS below
#cssdropdown li.headlink ul li a { padding:5px;} 
#cssdropdown li.headlink ul li a:hover { background-color: #333; color:White; }

这是我按照他们的指示使用的jQuery将菜单显示为IE修复程序。（注意，即使在IE 7中我使用纯CSS或CSS＆amp; jQuery也能正常工作。所有其他浏览器都能正常工作。

$(document).ready(function () {
        $('li.headlink').hover(
            function () { $('ul', this).css('display', 'block'); },
            function () { $('ul', this).css('display', 'none'); });
    });

最后是我的HTML：

<ul id="cssdropdown">
        <li class="headlink">
            <a href="../Pages/MainMenu.aspx">Main Menu</a>
            <ul>
                <li><a href="www.google.com">Google</a></li>
                <li><a href="www.yahoo.com">Yahoo</a></li>
                <li><a href="www.msn.com">MSN</a></li>
            </ul>
        </li>
 </ul>

我确实正确地链接了jQuery。

Answer 1

从height:35px;和it will work移除li.headlink。

Answer 2

在他们的页面上，他们在其中一个例子中使用了普通的JS。当您尝试使用此代码而不是jquery代码时，它是否有效？

        var lis = document.getElementById('cssdropdown').getElementsByTagName('li');
    for(i = 0; i < lis.length; i++)
    {
        var li = lis[i];
        if (li.className == 'headlink')
        {
            li.onmouseover = function() { this.getElementsByTagName('ul').item(0).style.display = 'block'; }
            li.onmouseout = function() { this.getElementsByTagName('ul').item(0).style.display = 'none'; }
        }
    }

Answer 3

似乎是IE z-index问题。

在两个位置设置z-index：相对元素标题和要修复的内容：

      #header { 

          z-index:2; 

      } 

      #content { 

          z-index:1; 

      }

Answer 4

上周（或前一周）我遇到了一个非常类似的问题，对我而言，子菜单ul需要宽度声明与li相同。

Answer 5

这对我有用：如果重要，我使用jQuery 1.10.2 ..

if (/msie 7\./ig.test(navigator.userAgent.toLowerCase())) {
    $("ul li ul li").each(
        function () {
            $(this).css("width", $(this).parent().width() + "px");
        }
    );

    $("ul li ul").each(
        function () {
            var ParentPos = $(this).parent().offset();
            $(this).css({
                "top": (ParentPos.top + $(this).parent().height()) + "px",
                "left": ParentPos.left + "px"
            }); // end css for This                             
        } // end function/each             
    );

    $("ul li ul li ul").each(
        function () {
            $(this).css("margin-top", "3px"); // end css for This   
        }
    );

} // end if IE 7 Bug -- B.Frederickson -- acey99

我的下拉菜单适用于每个浏览器，但IE 7.为什么？

5 个答案: