A fix for Suckerfish dropdowns in IE 7

Internet Explorer 7 is a welcome upgrade from IE 6, but it still has its share of display issues—and some new ones besides. Recently, I ran across one that falls in the latter category. Although Patrick Griffiths and Dan Webb’s Suckerfish dropdowns (and their follow-up, Son of Suckerfish) work fine in IE 6, they more or less choke and die in IE 7.

The problem is this: if you change focus within the browser (by clicking in a text field, for example, or somewhere on the background), then move back across the dropdowns, you’ll notice that all the menus “stick”—they don’t go away. In other words, they don’t refresh when the mouseout event is fired, even though the special hover class is removed.

Luckily, the fix for this is pretty simple. Assuming your unordered list menu ID is “menu”, you just need to add the following code to your stylesheet:

#menu li:hover, #menu li.hover {
  position: static;
}

Voilà, he says with proper grave accent! Problem fixed.

Like this post? You might also like Coalmine, my centralized error tracking service for your apps. Coalmine captures errors and all kinds of helpful debugging information, notifies you, and makes it all searchable. Check it out!

Tags: , ,

220 comments

  1. Have you tried this solution in Firefox? I’m getting the same “sticky” menus on Firefox that I was getting in IE7 before.

  2. Matt,

    Thanks! Your timing on this was amazing. I was reading the CSS mailing list, and saw your response about the fix for Suckerfish menus. I had done some testing last week with IE7, but somehow the sticky menu issue didn’t appear.

    Did my testing this morning, after reading your comment. Of course, the lovely bug appeared. I added your fix to my css file and all is working well.

    Have you implemented the change on any of your sites? Any other issues you’ve discovered with the Suckerfish menus? I did extensive testing this morning, but didn’t uncover any other issues.

  3. @David D
    We use Suckerfish dropdowns for a variety of sites, and luckily the only issue we’ve come across is in IE 7. It sounds like what you’re experiencing might be another issue..?

    @Deborah
    Yes, we’ve implemented the change on all of our sites, and it works great. No other issues to report as of yet.

  4. Matt,

    I just tested this under Safari 2.0, and it doesn’t appear that the fix is working. What were the results of your testing under Safari 2.0 in Mac OS 10.4?

  5. Hmm, sounds like a different issue. One of our designers (the one who originally showed me the problem) uses Safari 2 for all of his design work, and he hasn’t had an issue with it before or after the change.

  6. Matt,

    I ended up using conditional comments to target IE7 for the fix. Applying the two line fix directly to the CSS caused the Safari 2.0 menus to have the sticky behavior seen in IE7 before the fix.

    Just curious, how did your designers apply the fix?

  7. He just put it directly into the dropdown CSS, which he imports in his main stylesheet. The conditional comments fix is a good solution, though. I usually do something like this for all Internet Explorer-specific fixes:

    <!--[if IE]>
    <style type="text/stylesheet">
    @import url("/styles/application-ie.css");
    </style>
    <![endif]-->
  8. I wish this fix was working for me. But after trying quite a few combinations and permutations, I still can’t get it to work.

    Any help would be much appreciated.

    Best Regards, Lloyd Borrett.

  9. Matt, thanks for this! Spent most of the day struggling with this bug then finally happened across this post. If you’re ever over in the UK let me know and I’ll buy you a pint :)

  10. I had that problem in IE6 with the original suckerfish menu. It occurred if there was a displaced background with no background colour assigned to the area behind the menu – but only if the page was displayed in a frame. I think this was to do with the way that IE refreshes a page. Once I assigned a colour (white as it happened) to the entire background, the problem was resolved – and it does not occur in IE7.

    The problem I am getting with IE7 is that the menu (which is down the left hand side of the page – not across the top) works OK until the user zooms in or out. On settings other than 100%, the sub-menus that open are not in the correct position. Has anyone encountered that?

  11. Thanks for the fix. Works nicely. Yet to test on mac though, btu will get round to that next week.
    I’ve also just stumbled accross the problem with the secondary ‘s scaling their left margins when zoomed in ie7 too. Why can’t they just stick to the same standards as everyone else. grrr!
    Any ideas on this one?

  12. Our lead designer asked me the same thing. The only option I can see with that is to use JavaScript. It would check the current font size, compare it to the initial size, and adjust the secondary menu margins accordingly.

    In other words, not worth the effort. :-)

  13. Great. Simple as it is.
    Thank you.

  14. The fix works great for IE7

    In Firefox, IE6, and Opera the menus still work great after applying the fix, but it seems to send Safari bonkers.

    I’m not too sure if i’m concerned about that though, as I mainly use the menus on our company intranet.

  15. Works for me on Safari 1.3.2+ (which includes 2.x). Older versions may have issues, but I can’t test those at the moment.

  16. Many thanks, Matt. I was bummed to discover the IE7 suckerfish bug, but this is such an easy fix, I can’t complain.

    I’ve only used it on one site so far, but haven’t experienced any problems in my testing.

  17. Thanks a ton.. This works fine. My only concern is that with all the Javascript and fixes for the Menu to work over , the menu itself is running slow in IE :(

  18. Thank you for sharing this. I was down to my last chunk of hair.

  19. Hey There,

    I have a problem with this Suckerfish menu which is embedded to a JoomlaArt template called Ja_Zibal in Internet Explorer. In Firefox; despite having a sub level menu or not; the wordings/text is clickable (e.g. Home to Committee 06/07) wherelse in IE it doesn’t AND only the menu of “States” work in IE. Can anyone help me here please?

    Regards,
    Amrit

  20. This is a great fix to part of the problem I have.

    * I am seeing the same problem as the other Chris when viewing other than at 100%

    * My dropdown doesn’t appear BELOW the menu header, but beside it. The fix “cures” one problem by making the dropdown to lie over the neighbouring menu header, but it is still in the wrong place.

    See http://www.almoreltd.com for a menu with the fix in place and http://www.onemoretime.biz for one without.

    Best
    Chris

  21. has anyone sorted this positioning thing in ie 7 yet :(

  22. Hi folks,

    The “IE7 suckerfish 3rd level menu positioning problem when font size is greater than 100%” can be solved if you set your lists to “position: fixed”, e.g.

    #dropdownmenu li:hover ul,
    #dropdownmenu li li:hover ul,
    #dropdownmenu li li li:hover ul,
    #dropdownmenu li.sfhover ul,
    #dropdownmenu li li.sfhover ul,
    #dropdownmenu li li li.sfhover ul {
        position: fixed;       
    }

    However, you should only set “position: fixed” for IE7, as earlier versions of IE will choke on this, thus you should target this browser specifically using a conditional comment or similar.

    One caveat is that the IE7 whole screen zoom feature won’t work properly if you use “position: fixed” property — the 3rd level menu stays at the default zoom whereas the 2nd level menu will be zoomed in. However, if you increase text size via the “View | Text Size” menu option, then the submenu will display at the correct text size.

    This fix is working for me, but hopefully someone can come up with a more elegant solution which doesn’t require IE7-specific CSS.

  23. P.S. I should add that the above solution also fixes the original IE7 bug with the focus and onmouseout sticky. Thanks to Matt for sharing the original fix!

  24. HI

    Been gonig bonkers with this. YOur little fix seemed to work immediately. Works fine in FF, NS IE6/7. Haven’t been able to test out safari at all but hey!

    Thanks

    (PS now want to know how it works)

  25. Thanks for fix, it’s been bugging me all day! :)

  26. Hi Guys,
    I had the “appearing to the side” issue too. It had to do with an Opera fix-hack. I removed it and things worked fine. Opera folk haven’t started complaining.

  27. These were the offending lines:

    #navigation li > ul { /*positioning hack for non IE/Win UA */
        top: auto;
        left: auto;
    }
  28. The only fix is a JavaScript one, since all of these CSS “fixes” break the display in other browsers. The real problem here is that IE7 is not firing the onmouseout event at all for individual list items. Therefore, the only reliable way is to use browser sniffing (ick), in combination with using onmouseleave:

    sfHover = function() {
        var sfEls = document.getElementById("menu").getElementsByTagName("LI");
        // for each list item in the menu...
        for (var i=0; i
  29. @Andrew
    Sorry, I can’t fix the code snippet. Your post just suddenly ends.

    IE 7 does in fact fire the mouseout event. The list item class is changed (“hover” is removed). The problem is that IE doesn’t re-render the list items without declaring a position like “static”.

    Although I tried the fix in all the common browsers (IE, Firefox, Safari, Opera) without any issue, if it is a concern you can combine this fix with conditional comments so that only IE 7 “sees” the CSS.

  30. Any idea why my drop downs don’t show up in IE7? I followed the son of suckerfish instructions and can’t figure out what I’m doing wrong. Work fine in Firefox although I would like to eliminate the space between the main nav and drop downs. Any suggestions? Thanks!

  31. nevermind, found the problem..thanks!

  32. @Andrew:

    The CSS fixes presented above work in IE7 and all modern browsers including Opera, Safari, Firefox. It’s not working in IE5/Mac, but that’s no surprise. I’ve tested it extensively and we’re using CSS Suckerfish menus with 3 levels on our Intranet, and it’s working fine. At least, my solution is — I can’t comment on any other variations. As usual, you’ll need to cater for IE5/Win by serving slightly different CSS to it, but that’s standard anyway.

    There’s no need for additional complex JS.

  33. Hm… it must just be my variaiton that isn’t liking these fixes. I’ll side on a future-friendly solution over sniffing anyday, so I’ll revisit my homegrown method and compare with more widely used hybrid techniques out there.

  34. blahhh….I finally got the menu to show up in IE, but now in IE7 the sub-menus are detatched – there’s some minorly annoying flicker in Opera 9, but for the most part everywhere else (IE 5/5.5/6, NS, FF, etc.) everything seems fine….darn that IE 7….any ideas?
    http://svsbedford.org/svsweb/
    thanks
    –bp

  35. well…for whatever reason, I found the solution & magically it works in IE7 (and still works everywhere else) – in case anyone else is experiencing the same problem, here’s what I did… in the li > ul it did read ‘left: auto’ – but i changed that to ‘left: 0′

    so the new code reads:

    li > ul {
        top: 1.65em;
        left: 0;
    }

    I guess since IE now reads the child in v7 it was getting confused – I thought I’d tried that already but as long as it works, I’m not complaining!
    –bp

  36. You just saved me days of frustration. Brava!

  37. brandonjp has the answer for the “off to the side” in IE7. Works fine now in Safari, Mac FF, PC FF, IE6 + IE7.
    Thanks

  38. Thank you sooo muck, Matt! You are my hero forever and ever :)

  39. Hi,

    I’m having a “sticky” issue with the dropdowns over an iframe. The only way I can get them to not stick is to move my mouse up and over the button in the frame that they’re in, but when I move down and into the iframe they stick.

    Anyone else having this problem or a suggestion on how to fix (besides getting rid of the iframe)?

    Thanks :)

  40. forgot to mention… I’m using IE7, they work fine in firefox.

  41. thank you sooo much!!!! i was just about to call it quits until i stumbled this way! = )

  42. I’ve been having this problem with IE6 AND 7. Thanks for the fix.

    Of course, all of a sudden after fixing it once (using the javascript fix) the suckerfish menu is NOT appearing in IE6 again. I haven’t bothered checking 7. I can’t figure it out to save my life.

    Here it is: http://peterpixieproductions.com/new/

  43. Darren McManaway

    Anyone have a good fix for the z-index bug in IE?

    I seem to have fixed the problem in IE5/6 – but now 7 is giving me a headache…

    Any suggestions?

  44. it works!! though I have not tested with many browsers but it fixed the problem in IE7. And still works in IE6, Firefox

  45. To absolutely reproduce the problem of menu not collapsing in IE7, just press control-A in the browser to select all content on the page. Now move mouse over to your menu and go up and down. If the menu still works with the entire page selected, you’ve got it fixed.

  46. thank you thank you thank you. I new to css and on past projects have always tried to figure out how to make those menus “non-sticky”. Now I can go back and fix all the sites Ive been building. Great work.

  47. The fix did not work for the site above; the submenus appearing horizontally on the below-left rather than vertically below the top level list items. Instead the following worked:
    css:

    #topBarList li:hover ul li {position: static;} /*targeting just the submenu list items*/

    This worked for submenus with more than one item, but for some reason not for those with just one – these still ‘stuck’. To get round this it was necessary to add empty list items:
    html:

    and css:

    li.empty {font: 0px/0px "Lucida Grande", sans serif;}

    Any explanation for this would be much appreciated. Thanks to Matt for pointing the way.

  48. Here’s an alternative approach.

    I couldn’t use this fix because I was absolutely positioning the top-level li elements (don’t ask why!). After a long morning’s headache, my fix was to put the suckerfish javascript inside a conditional comment so that IE7 can’t see it. IE7 is supposed to support :hover on all elements so it should work – but it doesn’t! After further googling, I found the magic ingredient. Add the following mystic incantation to the standard suckerfish css

    #nav li:hover ul, #nav li.sfhover ul {
      left: auto;
      background-position: 0 0;
    }

    Working so far – let me know if it works for you – and especially if it doesn’t!

    More details of the background-position stuff on http://archivist.incutio.com/viewlist/css-discuss/81588

  49. The fix to suckerfish worked so my menus were no long sticky but now when i hover over the menu it displays horizontally instead of vertically.

  50. Maniquí

    I just want to say that Jack’s solution (comment #50) worked like a charm for me.
    Thanks to Matt and Jack. :D

  51. I’m having a bit of a problem getting this to work now with IE6. In using the original SoS menus, I realized that the way I was implementing, it wasn’t XHTML compliant (I use PHP to include a set of menus, then a divider made of spans, to see go to http://www.sbschools.org). So I decided to change the menus and css to use classes instead of IDs.

    FF, Safari and IE7 all work now, but IE6 has the sticking problem. After moving my hacks to conditional comments on my testing server, still no fix. I did some manipulations to the javascript and it looks like the mouseout function isn’t able to replace the sfhover with nothing, so the menus never revert back.

    Can anyone give me a hint? I’m pretty bad at JS, so I don’t know where to go from here.

  52. Hi

    I have got the lovely son of suckerfish menus to work fine in opera, FF IE6 and IE7. I had to use the position:static fix to get them to work in IE7.

    It doesn’t work on mac though!!!!

    I feel a sense of rising panic because a deadline is approaching on this.

    Can anyone help please

    Edward

  53. Edward,

    Make sure that the position:static rule only applies to IE7, either by making a separate style sheet and using conditional comments to include it or by using:

    *:first-child+html #menu li:hover, #menu li.hover {
        position: static;
    }

    Safari and FF go nuts with the position:static defined.

  54. Thanks for this fix. It works exactly as described. I’ve tested it in IE 5.5, 6 & 7, Firefox 1.5.011(mac) & 2.0(windows), Safari 2.0.4, Netscape 7.02 & 8.1.2, and Mozilla 1.7.1.

    My suckerfish menus are simple; perhaps more complicated ones need some browser specific rules but for my current menus, all is good again.

    Doctype is probably very important on how things work. I’m using: !DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”

  55. O.k., I think I have a solution to my own problem. I just changed the javascript line that replaces the sfHover tag name from the regular expression check to just setting it to “” and it seems to work in IE 6.

  56. arrgh, none of these fixing are working for me. I’ve tried matt’s fix, and jack’s fix to no avail. here is the url:

    http://saltstudio.com/client/MountainWater/TEST/test.htm

    any ideas?? thanks.

  57. found you after I found my solution that I document over here:
    http://htmlfixit.com/?p=1013

    I have them working quite well at present.

  58. Any idea how to get the dropdown to stay in front of quicktime or flash? I suppose something that could be done to how an “embed” tag works?

  59. The solution from comment 50 worked on our site, http://www.barriessports.com .

    everywhere you have the style: left: auto;
    you have to add the style: background-position: 0 0;

  60. Hi Chad,

    I had the same problem with my dropdowns going behind my flash movie. A solution is using a javascript file to call movie (which I would do anyway to avoid the “click to activate this control” message) and within the javascript set the param name=”wmode” value=”transparent”

  61. Holy lord. Thank you for this. I have been fighting with this crap for the better part of an afternoon. Good work sir.

  62. Hi Guys,
    I’ve just come across this thread and thought someone may be able to help. We’ve completed the above site for a client and used Suckerfish for the main nav, the menu looks great and functions well in all but – you’ve guessed it IE7! The problem is a bit different though. If you hover over the items with drop-downs – Shop Online and Information, the drop-down is very sensitive and often disappears when trying to select a sub-option.

    Any help on how to correct this would be greatly appreciated.

    The CSS is:

    .suckertreemenu {
        FONT-WEIGHT: bold; FONT-SIZE: small; WIDTH: 750px; FONT-FAMILY: Verdana, Helvetica, Arial, sans-serif; TEXT-DECORATION: none
    }
    .suckertreemenu UL {
        PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none
    }
    .suckertreemenu UL LI {
        DISPLAY: inline; BACKGROUND: url(../images/bg_top_menu.gif); FLOAT: left; LINE-HEIGHT: 30px; POSITION: relative
    }
    .suckertreemenu UL LI A {
        BORDER-RIGHT: #ffffff 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #ffffff 1px solid; DISPLAY: block; PADDING-LEFT: 2px; PADDING-BOTTOM: 1px; BORDER-LEFT: #ffffff 0px solid; WIDTH: 120px; PADDING-TOP: 1px; BORDER-BOTTOM: #ffffff 1px solid
    }
    .suckertreemenu UL LI UL {
        DISPLAY: block; LEFT: 0px; VISIBILITY: hidden; POSITION: absolute; TOP: 1em
    }
    .suckertreemenu UL LI UL LI {
        DISPLAY: list-item; FLOAT: none
    }
    .suckertreemenu UL LI UL LI UL {
        LEFT: 159px; TOP: 0px
    }
    .suckertreemenu UL LI UL LI A {
        BORDER-RIGHT: #ffffff 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #ffffff 1px solid; DISPLAY: block; PADDING-LEFT: 5px; FONT-SIZE: small; PADDING-BOTTOM: 1px; BORDER-LEFT: #ffffff 1px solid; WIDTH: 170px; PADDING-TOP: 1px; BORDER-BOTTOM: #ffffff 1px solid; FONT-FAMILY: Verdana, Helvetica, Arial, sans-serif; TEXT-DECORATION: none
    }
    .suckertreemenu UL LI A:hover {
        FONT-SIZE: small; BACKGROUND: url(../images/bg_top_menu_over.gif) #ffc3fe; COLOR: white; FONT-FAMILY: Verdana, Helvetica, Arial, sans-serif; TEXT-DECORATION: none
    }
    .suckertreemenu .mainfoldericon {
        BACKGROUND: url(../images/bg_top_menu.gif) #ffc3fe; COLOR: white
    }
    .suckertreemenu .subfoldericon {
        BACKGROUND: url(../images/bg_top_menu_over.gif) #ffc3fe; COLOR: white
    }
    * HTML P#iepara {
        PADDING-TOP: 1em
    }
    * HTML .suckertreemenu UL LI {
        FLOAT: left; HEIGHT: 1%
    }
    * HTML .suckertreemenu UL LI A {
        HEIGHT: 1%
    }

    Best wishes

    Dave
    http://www.atomicwebsolutions.com

  63. Apologies Guys, the site with the problem is:
    http://www.tinkerbells-treasures.com

    Best wishes

    Dave

  64. Thank you so much I have been pulling hairs out of my bald head with this problem and to think its that easy. You rock Matt, thank you so much

  65. question for you guys. How do I get the menu to show above my swf? I have my website has a flash image that hides the lists when its over it. I have z-index set at 1000 and it still hides underneath flash. Any Ideas?

  66. Thank you! I’ve been going nuts because of this problem and you had an instant fix…

  67. I don’t know if you can help me with this. I have been searching all over for a fix with my suckerfish dropdowns. My developer cannot get them to allow the image links in my primary navigation bar to show the link in the status/task bar at the bottom of the browser when you put the cursor on them. The dropdown links show there, but not the main nav link itself. This problem occurs in IE 6 and IE7. They work in FireFox. Any help would be greatly appreciated. The site is http://www.dev52.rewdev.com/

  68. So, anyone have a code example of a single menu dropdrop that is working in IE7?

    My submenu’s are shifting to the right and the background-position: 0, 0; is not working for me…

    I am in css hell. Any help would be greatly appreciated.

  69. Wow, this saved a lot of pain :) Thnx!

  70. simply amazing! Thank you so much for posting. I am forever grateful.

  71. Amsterdam Frank

    Thanks all. I will play with this. I guess I am back from a few years of css-hacking. Now with IE7 and future crap, I am trying to keep things clear of browser-hacks!
    The following MIGHT be for finetuning. TEST it yourselves. Since SF Javascript is only used by IE, why not convert it to JScript with CC’s ? Dunno of it works in Jscript. But even when it doesnt, you could document.write the regular Javascript WITH JScript :) Non-IE browsers will skipp it, in stead of misunderstanding it (?!)
    It would also be simpler to catch things like the Mac IE5 (5.2).

    /*@cc_on
      // suckerfish code here
    @*/

    OR

    /*@cc_on
      document.write(''+ code here +'');
    @*/

    Macintosh:

    /*@cc_on
     @if (@_mac)
       // hello mac
     @else
       // hello non-mac
     @end
    @*/

    You could (in theory) even catch a browser on XBox360 :) For it uses powerPC and is not Mac). Don’t know what kind of browser X360 will handle (once it is hacked). The code then could/should be:

    /*@cc_on
     @if (!(@_mac)) && @_PowerPC)
       // Hello XBox360
     @end
    @*/

    Also, when I’m seeing users who are in the 5% non-scripting browsers, I like to fall back to some dropdown a la Stu Nicholls’ http://www.cssplay.co.uk

    Cheers from Amsterdam,
    Frank

  72. @Frank
    While conditional compilation is useful for JavaScript applications, it’s probably not the best way to handle conditional CSS. You would be better off using IE’s own conditional comments. I typically have the general CSS in one file and IE-specific CSS (and only IE-specific CSS, of course) in another. The IE CSS overrides the general CSS—the C in “CSS” stands for “cascading”, after all.

    <style type="text/css">
    @import url('styles.css');
    </style>
    <!--[if lt IE 7]>
    <style type="text/css">
    @import url('styles-ie.css');
    </style>
    <![endif]-->
  73. @Tilly: i’m having the same problem here… Suckerfish menu is in an iFrame and works fine in all browsers except for IE7… :(

    When i’m not in an iFrame all browsers (including IE7) seem fine… Anyone got any ideas?

    Cheers

  74. Okay I just got my heavily modded suckerfishes going in ie7. My suckerfish is a single icon at the top right of the page that drops down a list of images which then pop-up horizontal sub-lists of images to the left… complex!

    They aren’t online sorry – last time I put my testing site up some bots managed to somehow index it and the client complained that people were finding it (yahoo search I think).

    Anyway the code changes which worked for me were conditional comments inserted in an external style sheet:

    <!--[if lte IE7]>-->

    #nav2 li ul {
    top: 100%;
    left: 0;
    }
    #nav2 li:hover ul {
    top: 100%;
    }
    #nav2 li li:hover ul {
    top: 0;
    }

    <!--<![endif]-->

    My code now works in IEs 5+ and gecko browsers. That’s all I can test. Hopefully this will give others some useful ideas about things to fiddle with.

    Graham E

  75. Thanks for posting this fix – excellent. Lucky I found it since not much hair left to pull out… Would never have guessed in a million years that position: static would be the answer. I’m back to being all what I want to be today…. empowered by a lovely browser.

  76. Hi all

    There are quite a few fixes for the sticky dropdowns in IE7. I have an article on my site about this issue that list over 30 fixes, please see.
    http://css-class.com/articles/explorer/sticky/index.htm

    There is also an explanation about why it happens, which is due to the left offset values given which hides or shows the submenus. Again support for a new selector in IE has bugs.

    Regards, Alan

  77. My drop down is in development but this fix worked perfectly. Thanks

  78. This worked! You da man!

  79. can anybody tell me, what file and what you should I change in it so the template Ja_Zibal displays correctly menu consisting from the two lines? Thx :)

  80. Thanks- while building a new dropdown for a new site I encountered the stick in IE7.

  81. Thank you. This has been quite a pain for some time so this fix will be applied to several websites.

  82. I have a suckerfish style menu on one of my websites > http://sweetskies.fruitwerks.us It works fine in FF and IE7, but there is a total lack of the drop-down in IE6. So far IE6 is only 22% of my hits, but if someone could look and see if they know why it does not work. Thanks!

  83. Thanks! That worked wonderfully. So simple, I’m glad I began with a search rather than just jumping into it. Thanks again – Ben

  84. Joseph Nicholas

    Thank you for the ‘static’ trick it saved me too!

  85. Matt, thanks a bunch! I hate to add another “me too”, but seriously, I have been driving myself nuts trying to work up a fix for this and it has been quite frustrating as it not only sticks on forms fields, but also pages with Google Maps. I’m glad I checked out your site. Phew!

  86. Matt, you are the bomb and so happy to see that your testing and tinkering managed to help out so many frustrated folks.

    Peace!

  87. Hi Kris or to whomever is able to help me,

    I am also experiencing what Chad was going through;

    (Comment #61)
    Chad Says:

    April 3rd, 2007 at 6:41 pm
    Any idea how to get the dropdown to stay in front of quicktime or flash? I suppose something that could be done to how an <embed> tag works?

    ————————————————————————————————————

    Below is my CSS that I currently have.

    <embed pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="420" height="127">

    Link for the website I am experiencing this http://tera-tech.net/
    ————————————————————————————————————–
    I tried what Kris said on Comment #63
    Kris Says:

    April 13th, 2007 at 9:29 am
    Hi Chad,

    I had the same problem with my dropdowns going behind my flash movie. A solution is using a javascript file to call movie (which I would do anyway to avoid the “click to activate this control” message) and within the javascript set the param name=”wmode” value=”transparent”

    —————————————————————————————————————-
    I am not sure as to where exactly I need to insert it in the script or if I am even on the right place. Also if you noticed on my CSS, it has the as Kris suggests to avoid the “click to activate this control” message, and I am still getting that message. Any help/suggestions will be very much appreciated. Thanks in advance!

  88. Works great thanks!!

  89. It fixed the sticky drop down problem AND also fixed an intermittent problem with a failure to drop down in the first place.

    Thanks

  90. If anyone is able to help point out how I can get the dropdown menu to display in IE7 as it does in IE6 please do.
    I’ve exhausted my options and I’m not sure why it’s not displaying directly under the menu item.

    The css file is located here: http://www.vooys.ca/quadra/css.css

    Please help.

  91. Just thought I’d let you know I stumbled upon this little snippet of code on your site.

    #nav li:hover, #nav li.hover {
        position: static;
    }

    It worked for the problem I was having with IE7 and the son of suckerfish dropdowns (Vertical) spilling their guts all over the place.

    I had an additional problem with IE7 this same day that drove me nuts for about 6 hours. The problem I was having was the menu had “position: fixed;” so that as you scroll the menu stays put. Nice effect I thought. Until the disappearing act in IE7. I solved that one by finding that if I had “clear: both;” on the footer the menu would disappear. With the footer set to “float: right;” the menu stopped disappearing in IE7.

    So… the only thing left now is this annoying effect I’m seeing in Firefox 2.0 only.

    It’s gotten a bit shaky and when I roll over a link in the middle of the nav bar the whole thing resizes slightly (enough to be annoying) and there is this disturbance to the content behind the popped out submenu’s.

    Opera, IE7, IE6, Firefox 1.5 all get it right.

  92. I have used the snippet:

    #nav li:hover, #nav li.hover {
    position: static;
    }

    and the menu still is offset in IE7 instead of displaying under the menu item.
    If anyone can let me know what I’ve done wrong please do so. I’m not a CSS guru (but wish i was).
    Page in question:
    http://www.vooys.ca/quadra/new.html
    Location of CSS:
    http://www.vooys.ca/quadra/css.css
    Displays perfectly in IE6 and Firefox 2

  93. My vertical menu finally works with #50 fix of adding “background-position: 0 0;”‘.
    The other suggestion ‘position:fixed’ worked for the vertical menu example but not for I.E. 6.

    I just want to say thank you to everyone. This was a very interesting and time consuming bug fix for me. I appreciate everyone who has come before me.

    I am still finalizing the fix into my client’s website but I’m pretty sure this will do it for me. Now I can watch the Warriors game… LOL!

    TTFN…

  94. Worked like a charm. (remember to rename the #menu to match your own id). Million dollar question though is what’s the magic behind the code? I see that to IE7, and all browsers, you are saying when I hover over the main nav link make it static. This changes the previous state of position absolute, which would only make the drop down nav visible.

    So how does it make it disappear when that was the original problem? Is it working some what like a js if else statement? When I hover do this, else, do this?

    Would love to hear if that’s how it’s doing it!

    thanks for finding and posting this, I was about to go raving mad.

  95. Thanks, Matt! This is just what I needed.

  96. It worked by adding:

    position: static;
    left: 0;

    to all hover and sfhover sections. Nice work. Thanks

  97. Great !
    Thanks for your time!

  98. finally a propper fix:D cheers!

  99. I still cannot get this drop down to work with IE7. I”ve tried the wmode transparent thing as well as z index. For some reason, I cannot get ufo.js to work.

    How come I can’t get this to work?

    http://209.223.98.107

  100. It works great! Thank you so much for sharing this! =D

  101. I have problem with z-index on a page. it display well on IE6 but have problem displaying well on IE7.it seperate the image i put as a background object in the z-index from the page elements.

    .img.x
    {
    position:absolute;
    left:-1px;
    top:0px;
    z-index:-1
    }
  102. Hi Turbo,
    Its hard to see exactly what you mean, but your use of the z-index is probably not going to work. IE6/7 implement z-index incorrectly, and for a start I don’t think negative z-indexes are implemented correctly. you will need to do some more research and maybe approach the problem from a different angle

  103. I’ve not noticed that problem yet. We are using the javascript for IE6 only, and pure CSS for all other browsers, including IE7. Has anyone reported this problem in this case?

  104. Hello, help for the ie6/ie7 z-index problem:
    If your menu is overlapping in the wrong order try this (found in this article: http://verens.com/archives/2005/07/15/ie-z-index-bug/)
    If the absolutely positioned elements are in separate position:relative containers, set the z-index on these containers and not the elements. Apparently IE creates separate z-index stacks for each container.

  105. For those who are still having problems with z-index, here was my solution for htt://allprotools.com

    1. First, I solved the problem of the ‘getting stuck’ menus in IE7 with Doug’s solution: http://www.htmldog.com/ptg/archives/000050.php#comment480 rather than the solution on this post.

    2. Second, I created a browser sniffer (I know, bad, but I could not get the z-index to work any other way – except maybe for completely redesigning the site.

    if (window.XMLHttpRequest) {
    if(document.expando){
    //IE7
    }else{
    //mozilla, safari, opera 9…etc
    }
    } else {
    // IE6, older browsers
    }

    I got this from Hedgar Wang’s comment at http://ajaxian.com/archives/detecting-ie7-in-javascript (though, careful, he mistyped ‘expando’ as ‘epando’)

    3. Using that, I called document.write(“”); and document.write(“”); The IE7 menus had the following commented out:

    /* removed to fix ie7 stuck menus bug according to: http://www.htmldog.com/ptg/archives/000050.php#comment480
    /*#menu1 li:hover ul, #menu1 li li:hover ul, #menu1 li li li:hover ul, #menu1 li li li li:hover ul {
        left: auto;
    } */


    /* removed to fix ie7 stuck menus bug according to: http://www.htmldog.com/ptg/archives/000050.php#comment480
    /*#menu2 li:hover ul, #menu2 li li:hover ul, #menu2 li li li:hover ul, #menu2 li li li li:hover ul {
        left: auto;
    } */

    So the final javascript in my header was:

        if (window.XMLHttpRequest) {
            if(document.expando){
                //IE7
                //alert("You're using IE7")
                document.write("");
            }else{
                //mozilla, safari, opera 9…etc
                //alert("You're using Firefox, Safari, or Opera")
                document.write("");
            }
        } else {
            // IE6, older browsers
            //alert("You're using Internet Explorer")
            document.write("");
        }
  106. I’ve read through all of these posts, tried all of these IE7 fixes and none of them work in my case. This menu works perfectly in Firefox by in IE7 the hover (rollover) has no effect.

    I’m using an image-based dropdown menu because my designer wants to maintain his MAC fonts. Can someone please post the entire workable code (with PHP not ASP if needed)? Also, what code do I use to eliminate the ActiveX warning in IE7?

    Thanks!
    Charles

  107. Sorry, forgot to post the menu link (although it’s under my name).

    http://whatwant.ca/menu/

    Thanks again.
    Charles

  108. Phew, glad i found this just in time. I was on such a deadline to get this bug fixed. Many thanks.

  109. Solved my problem – there was no !DOCTYPE in the due to ImageReady slicing the menu. Once it was put in it worked in IE7.

  110. Thanks guys. Worked great!

  111. Thank you so very very very much. I was at my wit’s end about to just write my own damn menu. A life saver for sure!

  112. Hi,

    I’m having a problem with my menu sticking as well. I’m having the same problem as Ryan (#59). If you click on each nav header image you’ll notice that they all will stick and not disappear. This only happens in IE 7. The same error happens on Alan’s fixes page (linked from #79).

    Any ideas?

    Thanks!

  113. I read all the posts here, but most of them solve parts of userproblems.

    Could you paste the complete working code for IE/FF/SAFARI?

    Thanks!

    Paul

  114. I was able to use the

    #menu li:hover, #menu li.hover {
      position: static;
    }

    this fixed the sticky issue as well as a drop down positioning issue (second level menu items would shift to the right about 100px or so.) in IE7. Now when you mouse over the top level the drop down won’t display until you move the mouse down into the drop down area. confusing me even further is that I use a border on the drop down:

    li ul { /* second-level lists */
        display: none;
        position: absolute;
        top: 15px;
        left: 0;
        font-size: 11px;
        border-right: 1px solid #000000;

    The border shows on mouseover but the text has the issue I described above. Any ideas?
    Here’s the link http://beta.quantumcom.com/squareone

  115. I have a problem with IE 5.2.3 on Mac. The dropdowns go underneath the main text. I have tried applying z-index to the nav element but still no good. Does anyone know how to overcome this.

  116. @Maddy
    There are many things on IE 5 Mac that are simply impossible to fix. Unless you are forced to support it, ignore it. And frankly, if you are forced to support it, challenge that decision. Microsoft discontinued support for it back in 2005, and last time I checked, even MSN.com doesn’t load correctly in the browser. You can’t download it anymore and haven’t been able to for over two years.

    At this point, only the technologically clueless still use it. If you’re developing for an audience like that (e.g., teachers), do an old-fashioned browser upgrade suggestion instead of pulling out your hair.

  117. Many thanks Matt. This is good to know. If anyone complains I can use this arguement. I have to build a fully accessible site which is why I worry about all these browsers. It was one of the designers who has it on his MAC and even he had said he would be surprised if anyone would use IE on a MAC anyway. I appreciate your quick response. Happy Easter from Maddy

  118. Beautiful. This was driving me crazy! :)

  119. Interesting…I haven’t experienced any of the issues above. The problem I’m having is stupid simple but I haven’t been able to solve it. The default underlining doesn’t occur on mouseover in IE7 for main menu items with NO levels below them even though text-decoration: underline is explicitly declared for all links.

    Any suggestions?

  120. Guys, I’m still having problems with IE7 and Safari. On IE7 it shifts the 2nd level li’s to the right and in Safari there is this small 1st level shift….

    http://fabrykaobrazu.pl/fabryka_final/drop_down.html

    CSS:

    #menu {
        width: 600px;
        height:20px;
        font-size:0.7em;
        font-weight:bold;
        font-family: Arial, Helvetica, sans-serif;
        display: block;
        position: relative;
        top: 55px;
        float: left;
        bottom: 5px;
    }
    ul { /* all lists */
        padding: 0;
        margin: 0;
        list-style: none;
    }

    li { /* all list items */
        list-style: none;
        width: 6.5em;
        padding-right: 10px;
        text-align: center;
        white-space: nowrap;
        float: left;
    }

    li ul { /* second-level lists */
        display: none;
        position: absolute;
        top: 1em;
        left: 0;
    }
    ul li a {
        color:#FFFFFF;
        text-decoration: none;
    }

    li>ul { /* to override top and left in browsers other than IE, which will position to the top right of the containing li, rather than bottom left */
        top: auto;
        left: auto;
    }
    li a:hover {
        color: #49B749;
        text-decoration: none;
        position: static;
        left: 0;
    }

    li:hover ul, li.hover ul { /* lists nested under hovered list items */
        display: block;
        list-style: none;
        background-color: #1C2226;
        word-spacing: 0.1em;
        padding: 5px;
        width: 80px;
        left: auto;
    }

    Any thoughts?

  121. I am also having trouble with the menu items dropping down to the right instead of below in IE 7 – shows up great in Firefox. Did anyone find a good answer to the “shows up offset to the right” problem?

  122. Rafal, try adding position:static to your li:hover ul;li.hover ul line – but keep in mind that I really have no idea what I’m talking about, it just seemed to work for me…

    EXCEPT-

    Now, my menu pushes the rest of my page down when it expands. Surely this is a simple fix? Has anyone have this happen and figure out what to do? I tried some z-index values but wasn’t successful, but again, I also am in the ‘take a stab at it and see what happens’ stage.

    link: http://72.167.156.114/ee/index.php

  123. rafal, karen – look at Jack’s comment # 50

    I was experiencing the same problem – do not use Jack’s fix with the position:static fix.

    Since this issue is so common, do you think a new post should be created with only all the great solutions here only, their are just so many comments to wade through to find solutions – it would be great to just be able to read solutions and try them all without having to read through 100 posts before finding the right one. just a thought.

    Thanks everyone, especially Jack#50

  124. I’ve tried several combinations of solutions from this page, but only the position:static fix seems to work for the positioning problem- I definitely don’t want to use a ‘bad’ solution, but at this point, I’ll settle for ‘solution’…

    Now I seem to have a problem with just the third menu item down on the second main navigation item– in IE7, the dropdown disappears before you can get to that particular 3rd-down menu item. Has anyone had this happen/have a solution? Link: http://72.167.156.114/ee/index.php?

  125. Hey.

    Thank you so much for posting this! What a great bit of help. I was doing some freelancing, came across this issue, googled it and up came your fix! Thanks again. Great work.

    Sam

  126. Jack’s background-position fix does not seem to work for me :/ and I am using the sfHover JS function

  127. Matt,

    Thanks for the improvement, well done! Now it works with or without JS enabled on IE7. I made some changes to the son of suckerfish too and I’ve added your tweak as well now on http://blog.netweblogic.com/css/suckerfish-drop-down-menu-improved/.

    It doesn’t require extra CSS when you need to add an extra level in the DDM hierarchy, and also has a shorter mootools friendly JS script which can be used in place of the traditional JS (which I also changed) for those using the library for other parts of their site.

  128. Thanks for the fix Matt. Works like a charm.

    Appears to me that most issues people are having result from them not including the fix in conditional comments. Works very easy if you do this.

    I agree with your comments re IE5 on macs. I no longer style anything for IE5 or 5.5 and I’m considering discontinuing styling for IE6 as of Jan 2009, if not sooner. There has to come a time when enough is enough. In truth, styling for any IE browser versions just seems to encourage them :o )

  129. Hey everyone. I am having some issuse with my menu but only in IE7 surprise surprise eh?

    Anyway, I have googled and googled and read and read and I still dont have any solution to the problems I am having

    1. the menus in IE7 appear to the right of the button, and
    2. the next level of menus appear way off to the side. Please help!!

    Thanks

    email your reply to admin@fredmoms.com
    and to see the issue see http://www.fredmoms.com

  130. PLEASE HELP!! I am new to Joomla and web development. I have been floundering my way through. I am having the ‘sticking’ drop-down menu problem and can’t seem to fix it. I tried adding the

     #menu li:hover, #menu li.hover {
        position: static;
    }

    I am using a joomla template, and I think I found the correct menu .css file to edit. I have posted help on the forum where I purchased the template -and they never answer back. If anyone can help me I’d greatly appreciate it. We are a non-profit organization and are up for a grant (they want to look at our website very soon). Thanks!

  131. @Dawn
    I had a few moments and decided to try to give you a hand.

    Move this line…

    <script src="http://detroitconcertchoir.com/templates/ja_xenia_ii/ja_menus/ja_cssmenu/ja.cssmenu.js" language="javascript" type="text/javascript"></script>

    …immediately below this line…

    <!--[if lte IE 6]>

    That should fix the problem in IE 7. Be aware that the site appears to have the same stickiness problem in IE 6. I looked at that for a bit but couldn’t nail down the cause of that issue (it appears to be a JavaScript issue).

    Incidentally, you should try putting the “position: static” stuff in style tags within an IE 7 conditional comment, like the one starting on line 29.

  132. Hi again,
    Are you referring to the ‘template’ index.php? If so, this is what mine looks like:

    <?=templateurl();?>/scripts/ja.script.js">
    <?=genMenuHead(); ?>
    <!--[if lte IE 6]>-->
  133. @Dawn

    I’m not sure what file it would be in, but that looks right. Good luck…

  134. work perfect on ie7; thanks for posting this.

  135. Hi All,

    I had appreciate if anyone can help me.

    I have a web page (can’t post the website link for security reasons) with suckerfish dropdown (3 level) menu/submenus. The submenus always fold/drop to the right,but never automatically fold to the left when the browser window is resized or viewed at different resolutions. Any ideas???

    Thanks in advance.

  136. I’m slow. I just added MSIE 7 today, and promptly discovered that my drop-downs stuck. HORRORS! I suppose IE 7 users have been in misery on my site for ages. Anyway, I did a search, found this page, made the change, tested it. Beautiful! I also tested it in FireFox and found everything to be running smoothly. Thanks!!!

  137. Hi Matt,
    great post! Two hours of headache without solutions and that’s it!!
    Really really thanks!!!

    Matteo

  138. Thanks for all the info on suckerfish drop down menu problems under IE7. I experienced the sticking problem also. The position 0,0 solution appears to work. Still seeking a solution to the reported problem of suckerfish dropdown menus hiding behind flash-type programs. I am experiencing the situation with a flash flip page and with non-flash modules as MIT’s SIMILE Timeline and Exhibit. The suggested approach of setting the flash flip page parameter “wmode” to transparent did not solve the problem as “wmode” was already set to transparent in the javascript code calling the file.

    Thanks
    Carol

  139. The suggested solution here is not one that will work in all cases. The real issue here is due to an IE bug related to hasLayout. depending on how fancy you got with your menu, many of the suggestions here will simply not work. The solution is really custom to your implementation. In my case, I added a overflow:auto to the sfhover class. Reference: http://www.satzansatz.de/cssd/onhavinglayout.html

  140. Thank you! This code fix really helped me out.

  141. Thanks a lot, you really helped me out.

  142. Regarding the Flash issue and hiding drop down menus, two solutions which effectively solved my problem:

    Set z-index of drop down menu higher than Flash program

    Also:
    Make sure that “wmode” “transparent” is in the section of the Flash program. Some programmers place the wmode / transparent in the section.

    Carol

  143. words omitted in previous typing due to use of right-left angle braces around script and non-script:

    place “wmode” “transparent” in “script” section. Some programmers place the coding in the “nonscript” section

  144. Great Post!
    One line fix, Wow!

    Took me hours and hours of frustration to define what my problem was with the suckerfish dropdown and them sticking only upon exiting above a link. Everything else was working just this intermittent sticking. I thought I was going to have to hire some one to fix it.

    A BIG thanks

    Albert

  145. Is there a way to differently style the first level and sub-levels? I tried to center the text-alignment for the first level but not the second level and beyond. It works fine in FF, but in IE the second-level box is also aligned to the center. I want the second-level box is stay remain in the left position and not got pushed to the right. This is for horizontal menu.

    Any hint is highly appreciated. Thank you in advance.

    Note: it would be nice if the author of this page try to center the text-alignment on the first level on the example pages.

  146. Thanks, it took me a week or two to realize we had an IE7 problem and this fixed it instantly.

  147. THANK YOU! that’s all I can say!

  148. Instructions on how to get dropdowns in front of flash:

    http://anekostudios.com/2006/08/03/son-of-suckerfish-and-flash/

  149. Anyone have a solution for using suckerfish with more than 3 sublevels? When I hover the second sublevel, both sublevel 3 and 4 shows instead of just 3 and then when I hover that 4 should show.

    I don’t have IE7 on my computer, does the menu function correctly in IE7?

    I also have a problem with the menus floating in mid-air on IE6, any solutions?

  150. The background-position: 0 0; solution from comment #50 did the trick overhere.
    For those whose menu are not on the correct loation, use
    left: 0;
    instead of
    left: auto;

  151. Thanks so much for this – you saved me tons of work. I was having this problem in IE7 in a page using IFrames. It now works in IE7 and did not break in FF3, IE6 or Safari 3.

  152. Another thanks for the fix. Nice ot see so many comments discussing it too

  153. thanks thanks!! i didn’t notice this bug till a client pointed it out. your fix worked out *perfectly*.

    now to check the other sites i’ve used suckerfish on. hah.

  154. OH MY GOD. THANK YOU for this fix.

  155. Hi!
    I am really a CSS newbie & I cant find a way to make my suckerfish menu work with IE… the submenus are not under the good topmenu, always under the next topmenu to the right.
    Could you please have a look and tell me what to do? I tried many solutions, but I am sure that I made something wrong.
    http://www.spljunior.com
    THks!
    Laurent

  156. Can someone fix my suckerfish dropdown in IE 6/7: http://is.gd/2mHD (position on :hover is to the right of my item…) ?

    I need to master this Dropdown because so many clients want it, and this seems to be the best method still.

  157. With a couple of the suggested changes above, my dropdown menus have been working without hitch in normal screen resolution in Firefox and IE7. Thanks!

    However, if, in IE7, someone uses the zoom feature under PAGE adjustments, the dropdown moves away from the preceding layer, creating a space between the base dropdown layer and the extension. Clicking on the extension becomes impossible as the new layer disappears once the mouse moves into the open break.

    Looks strange…currently fix by telling a viewer if using a zoom feature to go back to 100% resolution before exiting the page via the dropdown. Wondered if anyone encountered the problem and came up with a programming solution.

  158. Thanks for this. i too needed to position using absolute and Jack’s variation above worked a treat, 4 hours and 4 lines of code later i can finally go to bed.

    Cheers Jack.

  159. I am having a differnt problem with IE 7. On my menu the sub menu will not stay expanded when you move off the main menu. Any suggestion?

  160. Thanks, great fix.

    Karen > Perhaps you are using other scripts like JS in the contentfield. If that’s the case check if you’ve set the z-index correctly.

  161. Dave,

    I do not have a z-index. Could that be the problem?

  162. Has anyone else had the issue in IE where the menu sticks in one place when you resize the browser?

  163. Awesome…..Just what I needed.

  164. Heres another way to fix it in IE7 & not break it in IE6:

    #nav li:hover, #nav li.hover {  
        position: static !important;  
        position:relative;
    }
  165. Just wanted to say thank you. This is an old post, but the tip saved me probably hours of banging my head on the wall (and then crying, and banging some more and then more crying) LOL! Thanks!!

  166. Thank you very much – save me a headache!

    Jamie

  167. Hi everyone — I’m combining Son of Suckerfish with a “Sprites” image rollover effect in a vertical menu format, and I’m running into a different issue in IE7. I’m not running into the “sticky” issue as much as a pure functionality one: the menu is fine when there is no content in the DIV to the right of it. Once there is content, though, the fly-out menus disappear when you try and mouse through the links. For example, here you’ll see in IE7 that the fly-outs for the Vibration and Other rollovers are fine, but the ones for MWD/SWD/LWD are very buggy:

    http://leshowe.com/apstest/center.html

    Anybody else run into a similar issue?

  168. There are a lot of comments here with different things that worked for different people. Here’s what worked for me.

    http://pastie.org/360125

    As you’ll see, I was floating everything right, and therefore had to use the ie7 fix – ul li:hover { position:static } – in conjunction with – ul li { left: auto; }

  169. You are my hero! Thank you for figuring this out!

  170. I have been waiting for months for someone brilliant to come up with a fix for this – and you’ve done it! You’re my hero too! I’m so happy this works and I can’t thank you enough. You are a champion.

  171. Great thanks for publishing this fix! I was spending two hours figuring out what the source of the problem was.

    Don’t we all love the erratic behaviour of IE…

  172. Hello,
    I am using suckerfish menu for my wordpress blog but i am getting bug in IE as my menu is hiding behind slider.
    http://aamhimarathi.in/site‘ can you help

  173. appreciated, works a treat for me too.

  174. it works! thanks!!!!! really appreciated

  175. We’ve had this problem on our own site for a while, really useful tip which we can use across our other sites as well. Thanks for the post.

  176. Hello!

    I had the sticky suckerfish menu problem combined with a z-index problem on a vertical suckerfish. The position: static fix removed the sticky problem but then my z-index fix was lost, leaving the menus behind a google map. I ended up using the

    #menu li
    { height:1%;}

    solution, from this site (which also provides a list of other solutions):

    http://css-class.com/articles/explorer/sticky/index.htm

    good luck and boll***s to ie

  177. your position:static fix worked. thank you!

  178. worked perfectly. thanks.

  179. Thanks buddy! This was bugging me.

  180. I know this is a pretty old thread, but there was a comment above about centering the text in the top level menu, and having the submenu centered in IE; Firefox and Safari don’t suffer from this problem.

    The solution is in the “#nav li.sfhover ul” class to add a negative left margin equal to half the width of the LI element. I’ve tested this in IE7, Firefox 3 (mac/PC) and Safari 4 and they all work/display the same. Hope this helps!

  181. HI,
    i m stuck in extended menu in joomla using bolt as template.
    Warning: array_keys() [function.array-keys]: The first argument should be an array in /var/www/production/atelier/plugins/exmenu/bot_exmenu_source_sql_query.php on line 42

    Warning: Invalid argument supplied for foreach() in /var/www/production/atelier/plugins/exmenu/bot_exmenu_source_sql_query.php on line 42

    Notice: exmenu: no plugin found for the name “Extended Menu Source – SQL Query” in /var/www/production/atelier/modules/mod_exmenu-j15/exmenu/loader/plugin.menuloader.class.php on line 41
    Atelier des cigognes

    Please help !

  182. You are my god. ie7 would leave the text of my drop down stuck while the background would disappear.

    Thank you! Works great in IE7, IE8, Firefox 3.x, Safari.

  183. I’ve been having a similar issue, which i how I found this website. Currently, this also occurs in Firefox3.5.5 and Safari4.0.4.

    When I click on a menu item in the dropdown of the suckerfish menu, then click the back-button on the browser window, the suckerfish dropdown is still open/hanging down.

    Any suggestions? Thanks!

  184. Thanks very much indeed!!! The solution posted gracefully fixed the problem that was facing me. In my case, the suckerfish was working alright until I triggered other Javascript Events to show/hide HTML elements. After trigger other Javascript Events, if I moved the mouse over and out of the suckerfish, the fish sort of got confused and remained out of the water tank.

    I spent loads of time to find a fix, and as soon as I found your post, the problem was solved. I am now felt great and sure that I can have a nice sleep tonight.

    Many thanks again!

  185. Great fix! Thanks for this. I used it to fix a suckerfish issue on one of my client’s sites. So simple but so accurate.

    -Trevor

  186. This is what did it for me:

    li:hover{visibility:visible}
  187. Thanks for that it really works…

  188. My drop down menu works perfectly in Firefox, but in IE the drop down menu goes behind my posts. I’ve added all the recommendations in this post and still can’t figured out what else I’m supposed to do.

    Here’s my blog

    http://ddmguide.blogspot.com/

  189. Thanks, this worked for me!

    RealWaffle: Trying removing any position:relative you have on any containers that house your UL, that should do the trick.

  190. Thank you, thank you, this worked perfectly for me also!

  191. Amazing!! Thank you.

  192. Man, thank you so much, I love you!!! I’ve been torturing myself for hours and didn’t know it is THAT simple :) Wondering why it’s not written on suckerfish website. At least I didn’t notice it…

    Thanks a lot, really!

  193. Thank you, Thank You, Thank You

  194. I may actually love you for posting this fix. Worked in my situation. :)

  195. Thanks it’s work for me…

  196. Thanks man, you saved my life.

  197. I got hung up on some redraw problem in IE 8. I switched out the js with a jQuery version. If you’re already loading jQuery, maybe this’ll help you. Also useful in avoiding an error when the navigation doesn’t appear on all your pages.

    $(function(){
            var isIE = /msie/i.test(navigator.userAgent) && !window.opera;
            if (isIE) {
                $("nav li").each(function(){
                    $(this).hover(function(){
                        $(this).addClass("sfhover");
                    },
                    function(){
                        $(this).removeClass("sfhover");            
                    });
                });    
            }
        });
  198. I have tried and tried to get this to work. I have spent at least 10 hours searching all over the internet and NOTHING is working :( I have tried every fix I’ve found to no avail. But — mine isn’t a ‘rollover’ sticky. Mine just appears on the page on load and won’t go away. You don’t even have to rollover it for it to appear!! I am testing in IE8. Any help at all would be much appreciated!

    Here is the unmodified IE Nav Code:

    /* IE NAV */

    #searchform {margin:0;padding:0;height:1%;}
    #nav ul li.enhanced a.arrow { float: none;}
    #nav ul li ul, #searchform #s { left:0;top:0}
    .sf-menu ul { top: 29px !important; }
    .sf-menu ul ul { top: 0 !important; }
    #nav li:hover
    {position: static;}

    And the regular Superfish Code:

    /*** ESSENTIAL STYLES ***/
    .sf-menu, .sf-menu * {
        margin:         0;
        padding:        0;
        list-style:     none;
        font-size:      1em;
        text-align: left;
    }
    .sf-menu {
        line-height:    1.0;
    }
    .sf-menu ul {
        position:       absolute;
        top:            -999em;
        width:          10em; /* left offset of submenus need to match (see below) */
    }
    .sf-menu ul li {
        width:          100%;
    }
    .sf-menu li:hover {
        visibility:     inherit; /* fixes IE7 'sticky bug' */
    height: 1%;
    }
    .sf-menu li {
        float:          left;
        position:       relative;
    }
    .sf-menu li.right {float:right;}
    .sf-menu a {
        display:        block;
        position:       relative;
    }

    .sf-menu li:hover ul,
    .sf-menu li.sfHover ul {
        left:           0;
        top:            2.6em; /* match top ul list item height */
        z-index:        99;
    }
    ul.sf-menu li:hover li ul,
    ul.sf-menu li.sfHover li ul {
        top:            -999em;
    }
    ul.sf-menu li li:hover ul,
    ul.sf-menu li li.sfHover ul {
        left:           10em; /* match ul width */
        top:            0;
    }
    ul.sf-menu li li:hover li ul,
    ul.sf-menu li li.sfHover li ul {
        top:            -999em;
    }
    ul.sf-menu li li li:hover ul,
    ul.sf-menu li li li.sfHover ul {
        left:           10em; /* match ul width */
        top:            0;
    }

    /*** DEMO SKIN ***/
    .sf-menu {
        margin-bottom:  1em;
        font-size:11px;
        background:#000;
        width:auto;
        height:30px
    }
    .sf-menu a {
        padding:        9px;
        text-decoration:none;
    }

    .sf-menu a, .sf-menu a:visited  { /* visited pseudo selector so IE6 applies text colour*/
        color:          #fff;
    }
    .sf-menu li {
        background:     #000;
        margin-right:   2em;
       
    }
    .sf-menu li.right {
        margin-right:   0;
    }
    .sf-menu li li {
        background:     #000;
    }
    .sf-menu li li li {
        background:     #000;
       
    }
    .sf-menu li:hover, .sf-menu li.sfHover,
    .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
        background:     #1a1a1a;
        outline:        0;
    }

    /*** arrows **/
    .sf-menu a.sf-with-ul {
        padding-right:  2.25em;
        min-width:      1px; /* trigger IE7 hasLayout so spans position accurately */
    }
    .sf-sub-indicator {
        position:       absolute;
        display:        block;
        right:          .75em;
        top:            1em; /* IE6 only */
        width:          10px;
        height:         10px;
        text-indent:    -999em;
        overflow:       hidden;
        background:     url('img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
    }
    a > .sf-sub-indicator {  /* give all except IE6 the correct values */
        top:            .9em;
        background-position: 0 -100px; /* use translucent arrow for modern browsers*/
    }
    /* apply hovers to modern browsers */
    a:focus > .sf-sub-indicator,
    a:hover > .sf-sub-indicator,
    a:active > .sf-sub-indicator,
    li:hover > a > .sf-sub-indicator,
    li.sfHover > a > .sf-sub-indicator {
        background-position: -10px -100px; /* arrow hovers for modern browsers*/
    }

    /* point right for anchors in subs */
    .sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
    .sf-menu ul a > .sf-sub-indicator { background-position:  0 0; }
    /* apply hovers to modern browsers */
    .sf-menu ul a:focus > .sf-sub-indicator,
    .sf-menu ul a:hover > .sf-sub-indicator,
    .sf-menu ul a:active > .sf-sub-indicator,
    .sf-menu ul li:hover > a > .sf-sub-indicator,
    .sf-menu ul li.sfHover > a > .sf-sub-indicator {
        background-position: -10px 0; /* arrow hovers for modern browsers*/
    }

    /*** shadows for all but IE6 ***/
    .sf-shadow ul {
        background: url('img/shadow.png') no-repeat bottom right;
        padding: 0 8px 9px 0;
        -moz-border-radius-bottomleft: 17px;
        -moz-border-radius-topright: 17px;
        -webkit-border-top-right-radius: 17px;
        -webkit-border-bottom-left-radius: 17px;
    }
    .sf-shadow ul.sf-shadow-off {
        background: transparent;
    }
  199. Link exchange is nothing else except it is just placing the other person’s web site link on your page at appropriate place and other person will also do similar in support of you.

  200. Hi there it’s me, I am also visiting this web site on a regular basis, this web site is actually nice and the visitors are in fact sharing good thoughts.

  201. It’s actually a nice and helpful piece of information. I am glad that you simply shared this useful information with us. Please keep us informed like this. Thank you for sharing.

  202. Pretty section of content. I just stumbled upon your web site and
    in accession capital to assert that I acquire actually
    enjoyed account your blog posts. Any way I’ll be subscribing
    to your augment and even I achievement you access consistently fast.

  203. I’m amazed, I must say. Rarely do I encounter a blog that’s both educative and entertaining, and let me tell
    you, you have hit the nail on the head. The issue is something too few folks are speaking
    intelligently about. Now i’m very happy I stumbled
    across this in my search for something relating to this.

  204. fantastic submit, very informative. I wonder why the opposite specialists of this sector do
    not understand this. You must continue your writing. I’m confident, you have a huge readers’ base already!

  205. My relatives always say that I am wasting my time here at
    net, except I know I am getting familiarity every day by reading such pleasant articles.

Leave a comment