WordPress Theme Blog

Hi, after much research and reading about iframes and other horrible fixes, this was the answer. So simple. A valuable lesson learned. Many thanks for posting!

@james:

Exactly! It is so simple, but though you have to know. I didn’t and could have gone crazy with this

Nice one! I read the klog post before reading this and somehow I had missed Michael’s solution! I was having the exact same problem as you (including the superfish menu). You nailed it, mate!

Great fix! Just what I needed. Thanks!

@Timid&friendly:
I was surprised too

@Alex:
Happy I could clear things up.

@Tim Fletcher:
That’s what I thought when I found this fix.

@Tony Gray:
Welcome!

@Tim:
Yeah, it is soo simple but hard to see once you dived into the menu css trying to find the fix there

@WPCult:
To use the new function wp_page_menu() is possible but not necessary. To output a superfish menu in WordPress you just need an unordered list of your pages or categories with the subs as child lists:

<ul>
    <li>Parent item</li>
    <li>Parent item
        <ul>
            <li>Child item</li>
            <li>Child item</li>
        </ul>
    </li>
    <li>Parent item</li>
</ul>

As you might know you get these lists by using wp_list_pages or wp_list_categories. The only things to do is to implement the superfish plugin and apply the css class sf-menu to the list:

<ul id="any-id" class="sf-menu">
    <li>Parent item</li>
    <li>Parent item
        <ul>
            <li>Child item</li>
            <li>Child item</li>
        </ul>
    </li>
    <li>Parent item</li>
</ul>

I published a post (German) on how to get superfish running in a normal website and wanted to write the second part (German) on how to make a superfish menu with WordPress.

But anyhow, please write this tutorial and I would to link to this article since I just cover the German superfish fans

Merci bcp pour ce fix

Can anyone help me, I hve tried a few configuration and I cannot seem to be able to do it

Website is: http://www.ultimate3rivieres.org

Thanks

Claude

Thanks for your time.

Well in Firefox it is alright but in IE 7 or 6 if you look under the second item in the menu (L’ATRUF) it goes behind the text… same is true for the options in the menu (except it is not apparent like the 2nd one)

http://www.ultimate3rivieres.org/v2/index.php

Thanks

Grrrrrr…. won’t work….

Thanks webdemar for the great deFusion Theme. It looks great and it’s exactly the kind of theme I was looking for, but unfortunately I cannot get the dropdown-menu to work properly in IE 6. I set the z-index as described but still it’s not working for me with the IE. I’d really appreciate your help.
Thanks, Christian

BEST .. TIP .. EVER!
You saved me after hours of tweaking, and z-indexing the header div was really all it took. Thanks!
(And screw you, IE7)

I can send the CSS file to anyone that is willing to help.
Thanks

Thank you SOOOO much!! I thought i was going crazy when even adding position:relative and z-index to everything didn’t work. Best. Post. Ever.

Hi webdemar,

I have the same issue, tried z-index stack for both divs, nav & main. Would it be in my case that the content is a flash movie? I tried also the wmode for flash to transparent, but IE7&8 seems to ignore. I am on MODX with superfish down there.
http://regentcasino.ro/beta
Thanks for any idea and your time.
Alex

It is a well known bug with IE6 and 7 see the link for details:

http://therealcrisp.xs4all.nl/meuk/IE-zindexbug.html

Thanx … it was usefull for me !

Oh man, I love you.

Really just at those codes to the header and content in the main stylesheet and it’ll work in IE?????

Man, really really really thank you….
you saved my life

Cheers from Jordan

This is greatest fix…
but I can’t find
#header {
#content {
So if someone can point me where to search.
I work on some joomla template and I searched in all .css but not luck.
So if you can answer me it would be very helpful.
Thanks in advance.

Regards,
Filip

adding

.sf-menu, .sf-menu * {
z-index: 9999999 !important;
}
worked for me

Good solution!!!!

thx
—

adding

.sf-menu, .sf-menu * {
z-index: 9999999 !important;
}
worked for me