我的下拉菜单适用于除 IE 7 以外的所有浏览器。为什么？答案

【问题标题】：My Dropdown menu works right on every browser but IE 7. Why?我的下拉菜单适用于除 IE 7 以外的所有浏览器。为什么？
【发布时间】：2011-01-18 01:30:56
【问题描述】：

我正在制作一些基于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 和 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。

【问题讨论】：

标签： jquery html css drop-down-menu

【解决方案1】：

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

【讨论】：

做到了。那么我应该如何设置菜单的高度。我不想设置子元素的高度，因为它们可能需要超过 1 行的文本，但是没有指定主元素的高度似乎很奇怪。现在我必须调整我的标题栏以匹配菜单的高度。如果菜单改变了它的高度怎么办？
可以在<li>内设置<a>的高度，将<li>的垂直内边距和边距设置为0。

【解决方案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'; }
        }
    }

【讨论】：

【解决方案3】：

这似乎是 IE z-index 问题。

在两个位置设置z-index：相对元素header和content to fix：

      #header { 

          z-index:2; 

      } 

      #content { 

          z-index:1; 

      }

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案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

【讨论】：