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?