开发者

CSS adjacent sibling selectors - IE8 problem

开发者 https://www.devze.com 2022-12-09 19:42 出处:网络
I am creating a menu system using a UL/LI structure. I\'m trying to use sibling selectors for hover/show-sub-menus.

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 "Hov开发者_运维百科er 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?


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).


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

ie

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

Hope that helps

Josh

0

精彩评论

暂无评论...
验证码 换一张
取 消