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

Question

我正在根据本教程制作一些基本的下拉菜单所以它除了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.

Answer 1

删除height:35px;从li.headlink和它的工作.