title: dropdown hover not staying open in IE9
body: <p>I swear I have done something this simple dropdown a million times, but for some reason IE9 doe snot want to cooperate. If you are testing it in Chrome it will work just fine, but go to IE9 and the dropdown doesn't stay open while being hovered. </p>
  
  <p>At first I thought I was adding the pseudoclass :hover to the wrong element becasue itlooks like it's not catching the <code>&lt;li&gt;</code>, but I don't think that's it. You will notice in my code I have the submenu ul displayed none, and I am telling it later that when it gets hovered to display its submenu ul. And it does, but it goes away :(</p>
  
  <p>The funky thing is, if I adjust the position of the submenu, it will work! So go figure!</p>
  
  <ol>
  <li>Am I applying the pseudoclass in the wrong place?</li>
  <li>If so, how come it works fine in chrome?</li>
  <li>And what does the position adjustment have to do with anything?</li>
  </ol>
  
  <p>p.s. I already checked this <a href="https://stackoverflow.com/questions/16990218/css-dropdown-menu-wont-stay-visible-when-you-hover-over-the-menu-itself">CSS dropdown menu won't stay visible when you hover over the menu itself</a> out and it gave me a good direction but didn't solve my problem and the thread is kinda dead</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="blue-bar"&gt;
  &lt;div class="homepage-menu right"&gt;
      &lt;ul&gt;
          &lt;li&gt;PA STATE AGENCIES   &lt;span class="whitecaret"&gt;&lt;/span&gt; 
              &lt;ul class="homepage-submenu" &gt;  
                  &lt;a href="#"&gt;&lt;li&gt;Education&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;li&gt;Environmental Protection&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;li&gt;Game Commission&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;li&gt;Homeland Security&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;li&gt;Labor &amp; Industry&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;li&gt;Lottery&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;li&gt;Public Welfare&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;li&gt;Revenue&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;li&gt;State&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;li&gt;Transportation&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;li&gt;More Agencies...&lt;/li&gt;&lt;/a&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;PA ONLINE SERVICES  &lt;span class="whitecaret"&gt;&lt;/span&gt; 
  
              &lt;ul class="homepage-submenu"&gt;   
                  &lt;a href="#"&gt;&lt;li&gt;COMPASS: Access to Health and Human Services&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;li&gt;Driver &amp; Vehicle Services&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;li&gt;Find a Job&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;li&gt;Fishing Licenses&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;li&gt;Homeleand Security Tip Submission&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;li&gt;Hunting Licenses&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;li&gt;Personal Income Taxes&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;li&gt;Places to Stay in PA&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;li&gt;Turnpike E-Z Pass&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;li&gt;Unemployment Compensation&lt;/li&gt;&lt;/a&gt;
                  &lt;a href="#"&gt;&lt;li&gt;More Services...&lt;/li&gt;&lt;/a&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS</p>
  
  <pre><code>/*Home Page */
  
  .blue-bar {
      background-color: #2a5192;
      height: 25px;
      margin-top: 0;
   }
   .homepage-menu{
  z-index: 2;
  height: 25px;
   }
   .homepage-menu ul {
  text-align: left;
  margin: 0;
  display:inline;
  padding: 10px 0px;
  list-style: none;
  font-family: "open_sanssemibold";
  color: white;
   }
   .homepage-menu ul li {
  display: inline-block;
  position: relative;
  padding: 2px 20px;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
   }
   .homepage-menu ul li:hover  {
       color: #e6a61c;
   }
   .homepage-menu .whitecaret {
  border-top: 6px solid white;
   }
   .homepage-menu ul li ul li {
  background-color: #2a5192;
  color: white;
  text-shadow: 0 -1px 0 #000;
  margin: 0px 0px;
  padding: 2px 10px;
  width: 100%;
   }
   .homepage-menu ul li ul li:first-child {
  padding-top: 15px;
   }
   .homepage-menu ul li ul li:hover {
  background: #666;
   }
   ul.homepage-submenu{
  padding: 0;
  position: absolute;
  top: 25px; /* change this to top: 15px;*/
  left: 11px;
  width: 200px;
      display:none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
  z-index: 1;
   }
   .homepage-menu &gt; ul &gt; li:hover ul{
  display: block;
  background-color: #2a5192;
  color: white;
   }
   .whitecaret {
  float: right;
  position: relative;
  top: -13px;
  left: 10px;
      border-top: 8px solid white;
  border-right: 8px solid transparent;
  border-left: 8px solid transparent;
   }
  </code></pre>
  
  <p>And also a <a href="http://jsfiddle.net/FB2Fb/3/" rel="nofollow noreferrer"><strong><em>FIDDLE</em></strong></a></p>