title: CSS drop down menu disappears when using Internet Explorer 9
body: <p>I have a CSS menu that I am trying to build. It works great with text and anchor links, but I used the same CSS for a drop down menu with social media like buttons (facebook, twitter, ect) everything works great except in IE9! I swear this browser will be the death of me! I have read it looks like the :hover is the issue that I need to maybe to a mouseover or something with JS! My expertise in that area is limited  and I have no idea what to do.</p>
  
  <p>This is the HTML</p>
  
  <pre><code>&lt;ul id="nav"&gt;
  &lt;li&gt;Share This Page
      &lt;ul&gt;
          &lt;li&gt;
                      &lt;div id="social_body"&gt;
                         &lt;div id="social_left"&gt;
                           &lt;g:plusone size="tall"&gt;&lt;/g:plusone&gt;
                         &lt;/div&gt;
                         &lt;div id="social_right"&gt;
                           &lt;div class="fb-like" data-send="false" data-layout="box_count"     
                          data-width="55" data-show-faces="true"&gt;&lt;/div&gt;
                         &lt;/div&gt;
                       &lt;/div&gt; 
                  &lt;/li&gt;
          &lt;li&gt;
                      &lt;div id="social_body"&gt;
                        &lt;div id="social_left"&gt;
                            &lt;a href="https://twitter.com/share" class="twitter-share-
                               button" data-count="vertical"&gt;Tweet&lt;/a&gt;
                               &lt;script&gt;!function(d,s,id){var                                  
                               js,fjs=d.getElementsByTagName(s)                                 
                               [0];if(!d.getElementById(id))
                               {js=d.createElement(s);js.id=id;js.src="
                               //platform.twitter.com/widgets.js";
                               fjs.parentNode.insertBefore(js,fjs);}}
                               (document,"script","twitter-wjs");&lt;/script&gt;
                        &lt;/div&gt;
                        &lt;div id="social_right"&gt;
                           &lt;script src="//platform.linkedin.com/in.js" 
                               type="text/javascript"&gt;&lt;/script&gt;
                               &lt;script type="IN/Share" data-counter="top"&gt;&lt;/script&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                   &lt;/li&gt;
                   &lt;li&gt;&lt;div id="share_footer"&gt;&lt;a href="http://www.brandonturpin.com" 
                               target="_blank"&gt;Zen Cart Module&lt;/a&gt; by Brandon Turpin&lt;/div&gt;
                   &lt;/li&gt;
      &lt;/ul&gt;
          &lt;/li&gt;
              &lt;/ul&gt;
  </code></pre>
  
  <p>And here is the CSS</p>
  
  <pre><code>/*------------------------------------*\
      RESET
  \*------------------------------------*/
  body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{
      margin:0;
      padding:0;
  }
  table{
      border-collapse:collapse;
      border-spacing:0;
  }
  fieldset,img{
      border:0;
  }
  address,caption,cite,code,dfn,th,var{
      font-style:normal;
      font-weight:normal;
  }
  caption,th{
      text-align:left;
  }
  h1,h2,h3,h4,h5,h6{
      font-size:100%;
      font-weight:normal;
  }
  q:before,q:after{
      content:'';
  }
  abbr,acronym{
      border:0;
  }
  
  
  /*------------------------------------*\
      DROPDOWN
  \*------------------------------------*/
  
  #nav{   color: #1e598e;
      list-style:none;
      font-weight:bold;
      margin-bottom:10px;
      /* Clear floats */
      float:left;
      width:100%;
      /* Bring the nav above everything else--uncomment if needed.
      position:relative;
      z-index:5;
      */
  }
  #nav li{
      text-align: center;
      margin-right:10px;
      position:relative;
  }
  
  
  /*--- DROPDOWN ---*/
  #nav ul{
      background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
      background:rgba(255,255,255,0.8); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
          height:auto; 
          padding-left: 5px; 
          padding-top: 10px; 
          padding-bottom: 5px; 
          padding-right: 5px; 
          border: 2px solid #e3e3e3;
          width: 14em;
      list-style:none;
      position:absolute;
      left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
  }
  #nav ul li{
      float:none;
  }
  #nav ul a{
      white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
  }
  #nav li:hover ul{ /* Display the dropdown on hover */
      left:0; /* Bring back on-screen when needed */
  }
  </code></pre>
  
  <p>Im a little lost!! Dang IE9</p>