CSS dropdown z-index problem in IE7 (Extended menu for Joomla)

Posted on 2009-04-28
Last Modified: 2012-05-06
I previously asked the question below. The fix suggested worked to sort out the IE6 problem but unfortunately the fix made it so that IE7 does not display the drop down menus correctly - they go under the DIV "slogan_section".
The fix was to remove position:relative from .top_menu.
Any suggestions?

"I have a problem with 'Extended Menu' for joomla not working on IE6.
I have tried the :hover fix for IE6 with no success.
The menu does appear as a link (hand cursor) for a millisecond while the page loads but after that you cannot click on the menu titles.
I'm not too bothered about the drop-down bits of the menus working in IE6, as long as they can click on the menu titles.
The website is at
Many thanks in advance for any ideas."

Question by:browsw
    LVL 6

    Expert Comment

    It looks and works fine on my IE7 and FF3.

    Author Comment

    Hi biyik,
    I have just changed it back to keep the majority (IE7) happy. Just setting up a test site now...
    LVL 13

    Expert Comment

    My IE7 looks ok.

    Before z-index can work, you have to have position:relative in the div. This means if you want the menu DIV to be on top, you need to have a position: relative otherwise z-index will not work.


    It happens. But you may need a javascript fix. Check the website.


    Author Comment

    OK sorry - I was not very clear!

    On the production site ( the drop-downs work fine in all browsers except IE6 which you cannot even click on the menu titles
    CSS: in .top_menu there is position:relative

    On the test site ( the dropdown menus work in FF,IE8 and the  titles (only) work in IE6 (fine), but in IE7 the menus are hidden behind the box below.
    CSS: in .top_menu there is NOT position:relative - this was the previously suggested fix for IE6 but it breaks IE 7!!

    Many, many thanks in advance your expertise.
    LVL 42

    Accepted Solution

    Ah. IE5-7's weird z-index implementation strikes again.


    #main_body ul li, .top_menu, .top_line { behavior: url(/new/templates/cycletheme/css/ }


    #main_body ul li, .top_menu, .top_line { position:static; behavior: url(/new/templates/cycletheme/css/ }

    And then remove the comment from around position:relative in the ".top_menu" rule.

    Alternatively, instead of declaring position:static you could remove position:relative from #top_nav and apply the backgrounds to it instead.

    Author Comment

    Kravimir - super advise as usual, but still not quite there:

    if I add your position:static fix it makes the drop-down menus work in IE6, BUT the menus appear behind <DIV "slogan_section"> both in IE6 and IE7.

    If remove the comment around position:relative in ".top_menu", the IE7 menu appear fine, but you cannot even click the menu titles in IE6!

    I have left it is the first state; the production site is in the second state.

    Any ideas?
    Many thanks

    Author Comment

    Hi everyone - really struggling for a solution to this one - any ideas or extra information I can give?

    Author Comment

    OK I have nearly got this to work by putting the menu background into a seperate DIV. The only problem now is that the menu background is 'whited out' in IE6 (see to see what I mean?
    Any ideas on how to fix this last issue?

    Author Comment

    Sorted the final problem out by adding menu_back to the IE6 code:
    #main_body ul li, .top_menu, .top_line, #menu_back { position:static; behavior: url....
    Thanks everyone

    Author Comment

    This was especially helpful:

    Author Closing Comment

    Thanks although this did not solve the problem it helped me on the way.
    LVL 42

    Expert Comment

    by:David S.
    Congratulations on finding a solution to your problem and thanks for the points.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Course: CSS Specialist

    We don’t have to sell you on the idea of becoming a developer. If you’re you here, you already know it’s one of the most lucrative (and fastest growing) career tracks out there. It’s CSS that allows you to set yourself apart from other web and mobile developers.

    Suggested Solutions

    Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
    Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
    In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    10 Experts available now in Live!

    Get 1:1 Help Now