My Dropdown menu works right on every browser but IE 7. Why?

Question

I'm making some basic drop down menus based on this tutorial So its all dandy except for IE7. It appears when you hover on it but when you move the mouse from the main element to the ones below it it hides again.

/* 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; }

And here's the jQuery I used per their instructions to show the menu as an IE fix. (Note it works identical when I use pure CSS or CSS & jQuery even in IE 7. All other browsers work fine.

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

and finally my 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>

I do have jQuery linked properly.

Answer 1

On their page they are using plain JS on one of the examples. Does it work when you try this code instead of the jquery code?

        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 2

Remove height:35px; from li.headlink and it will work.

Answer 3

It appears to be the IE z-index issue.

Set the z-index on the two position:relative elements header and content to fix:

      #header { 

          z-index:2; 

      } 

      #content { 

          z-index:1; 

      }  

Answer 4

I had a very similar problem last week (or week before), for me it was the sub menu ul needed to have a width declaration of the same width as the li.