CSS adjacent sibling selectors - IE8 problem
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?
Answer
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).