title: IE8 Issue with CSS-Controlled Dropdown Menus
body: <p>I've created a site where I built a 3-level drop-down menu. Everything is working great in every browser I've tested in so far except for IE8. In IE8, when you hover over the highest level buttons, the drop-down menus appear. When you mouse over any secondary pages that have children under then, the menus SHOULD appear to the right of the parent page, and it does this in Chrome, Firefox, Safari, and IE9+.</p>
  
  <p>I was hoping someone could take a look at the site and let me know if you've got any ideas.</p>
  
  <p><a href="http://sightlines.quantumdynamix.net/" rel="nofollow noreferrer">http://sightlines.quantumdynamix.net/</a></p>
  
  <p>Hover over "Who We Are" and "Our Team" should have a tertiary level menu, but it does not display in IE8.</p>
  
  <p>Here is the CSS that displays the tertiary level menu:</p>
  
  <pre><code>#mainNavContainer .sub-menu li:hover &gt; div &gt; .sub-menu {
          display: block;
  }
  </code></pre>
  
  <p>And here is the menu code (trimmed down since you wouldn't need the entire menu for this). Sorry for the large amount of classes, but it is a Wordpress menu.</p>
  
  <pre><code>&lt;div id="mainNavContainer"&gt;
      &lt;div class="menu-main-menu-container"&gt;
          &lt;ul id="menu-main-menu" class="menu"&gt;
              &lt;li id="menu-item-72" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-first has_children menu-item-72"&gt;
                  &lt;a href="/who-we-are/"&gt;Who We Are&lt;/a&gt;
                  &lt;div class="sub-menu-container"&gt;
                      &lt;ul class="sub-menu"&gt;
                          &lt;li id="menu-item-73" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-73"&gt;
                              &lt;a href="/who-we-are/our-story/"&gt;Our Story&lt;/a&gt;
                          &lt;/li&gt;
                          &lt;li id="menu-item-74" class="menu-item menu-item-type-post_type menu-item-object-page has_children menu-item-74"&gt;
                              &lt;a href="/who-we-are/our-team/"&gt;Our Team&lt;/a&gt;
                              &lt;div class="sub-menu-container"&gt;
                                  &lt;ul class="sub-menu"&gt;
                                      &lt;li id="menu-item-75" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-75"&gt;
                                          &lt;a href="/who-we-are/our-team/executive-team/"&gt;Executive Team&lt;/a&gt;
                                      &lt;/li&gt;
                                      &lt;li id="menu-item-76" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-76"&gt;
                                          &lt;a href="/who-we-are/our-team/leadership-team/"&gt;Leadership Team&lt;/a&gt;
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                              &lt;/div&gt;
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is a screenshot of what is happening. The blue box is generated from the Dev Tools in IE8, indicating that the browser does know where the sub-menu should be, but it does not display when I hover over Our Team.</p>
  
  <p><img src="https://i.stack.imgur.com/r5BbJ.jpg" alt="Example"></p>