CSS related selectors - IE8 issue

I am creating a menu system using the UL / LI structure. I am trying to use selector clips for hover / show-sub-menus.

I use this;

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

The UL structure will 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>

Presumably, when you hover over "Hover Over Me", sibling ul should be displayed. It works fine in Firefox, but not in IE8 at all. I'm sure I saw the "+" selector used in IE8 before, where am I mistaken?

+5
source share
2 answers

You need to make sure that IE is working in standard mode - enter this type of document:

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

From the documentation :

"" (+), . .

"E + F" F, E , ( ). E F , E F. , first-child.

Windows Internet Explorer 7 .
(! DOCTYPE).

+9

li , .. http://www.xs4all.nl/~peterned/csshover.html

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

,

0

All Articles