Fix: Suckerfish IE7 Disappear/Sticky Bug [Yay!]

After searching Google and reading comments, I could not find a solution to a problem I had while using the Sons of Suckerfish drop-down menu.

My problem was not only that the drop down stuck when you clicked somewhere first, but also the drop down would disappear when I got past a certain point (probably the height of the containing <li>).

Here’s how I fixed it:

ul#nav li:hover div, ul#nav li.over div

{

    left:0;

    zoom:1; /* fix ie7 disappear */

}

ul#nav li:hover, ul#nav li.over

{

    height:auto; /* fix ie7 sticky */

}

Note that I have a containing <div> within the <li> element. That is because my drop-downs are a bit more customized with headings, background, etc. Just change “div” to “ul” if you just have a <ul> inside the <li>. Note I also use “left:0” because the containing list element aligns text to the center, so an auto left margin centers the drop down which isn’t what I want.

Thanks to css-class.com for their list of fixes. This works in all browsers I own.

Tested in: Firefox 2+, IE6+, Safari 3, and Opera 9