title: CSS adjacent sibling selectors - IE8 problem
body: <p>I am creating a menu system using a UL/LI structure. I'm trying to use sibling selectors for hover/show-sub-menus.</p>
  
  <p>I'm using this;</p>
  
  <pre><code>#MainMenu li.Sel ul li.HasSub a:hover+ul {
       display: block;
  }
  </code></pre>
  
  <p>The UL structure would be something like this;</p>
  
  <pre><code>&lt;ul id='MainMenu'&gt;
      &lt;li class='Sel'&gt;
      &lt;a href='#'&gt;Click Me&lt;/a&gt;
          &lt;ul&gt;
              &lt;li class='HasSub'&gt;
                  &lt;a href='#'&gt;Hover Over Me&lt;/a&gt;
                  &lt;ul&gt;
                      &lt;li&gt;Link&lt;/li&gt;
                      &lt;li&gt;Link&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>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?</p>