CSS adjacent sibling selectors - IE8 problem

Asked 23/10, 2009 at 10:30 Answered 23/10, 2009 at 10:39

I am creating a menu system using a UL/LI structure. I'm trying to use sibling selectors for hover/show-sub-menus.

I'm using this;

#MainMenu li.Sel ul li.HasSub a:hover+ul {
     display: block;
}

The UL structure would be something like this;

<ul id='MainMenu'>
    <li class='Sel'>
    <a href='#'>Click Me</a>
        <ul>
            <li class='HasSub'>
                <a href='#'>Hover Over Me</a>
                <ul>
                    <li>Link</li>
                    <li>Link</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

Supposedly, when hovering over "Hover Over Me", the sibling ul should be displayed. It works great in Firefox, but not at all in IE8. I'm sure I've seen the '+' sibling selector used in IE8 before, where am I going wrong?

Olindaolinde answered 23/10, 2009 at 10:30 Comment(0)

You need to make sure IE is running in standards mode - put in a doctype like this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

From the documentation:

The adjacent sibling combinator is a "plus sign" (+) character that separates two simple selectors. Whitespace is not significant.

A selector of the form "E+F" matches element F when it immediately follows sibling element E in the document tree, ignoring non-element nodes (such as text nodes and comments). Element E and F must share the same parent and E must immediately precede F. To match the first child of the parent, use the :first-child pseudo-class.

Note Requires Windows Internet Explorer 7 or later.
Note Combinators are enabled only in standards-compliant mode (strict !DOCTYPE).

Berneta answered 23/10, 2009 at 10:33 Comment(1)

Hah. What's funny is, I dropped the doctype so that I could make an iframe 100% height of a table cell. Thanks, guess I'm going to have to try and figure out the 100% height thing seperately. Any ideas? I'm going to have to use JS for IE6 menu effects. Cheers. – Olindaolinde 23/10, 2009 at 10:57

would it be simpler to add the hover on the li element and fix the hover for ie using this http://www.xs4all.nl/~peterned/csshover.html

#MainMenu li.Sel ul li.HasSub:hover {
     display: block;
}

Hope that helps

Josh

Cholinesterase answered 23/10, 2009 at 10:39 Comment(0)

Recommended topics

Hot tags