title: Hover drop down menus closing before selection in Internet Explorer 11
body: <p>disclaimer: I am very new to all coding, so TIA for your patience...</p>
  
  <p>I was tasked with getting some pages working that I did not create and the person that made it is no longer an employee. I have them working ok in Chrome and Firefox, but not Internet Explorer.  The portion of the page that is not working are the dropdown menus which display on a mouseover and are for selecting how data in a map is displayed (populated via jQuery).  In IE when you click on a drop down menu to open it to view selections you can view them, but as soon as you move your mouse cursor the menu closes, so you can’t select anything.  If you hold the mouse button down you can view the whole menu, but releasing the mouse button or moving the mouse just causes the drop down to close without a selection.</p>
  
  <p>I’ve been trying to research what could be causing the problem, and from what I can gather it could be an issue with jQuery and/or with CSS settings (z-index, or top?)  I’ve tried changing the CSS settings but can’t elicit any change in the drop down staying open for longer.  I’m a bit overwhelmed with this one and if someone could help point me towards what might be the underlying issue so I can research more specifically, that would be very much appreciated.  </p>
  
  <p>I will try to post the areas that I think are the relevant code (I can also post page links if need-be), I’ve left notes in here in case they are helpful as they were left from previous coder:</p>
  
  <p><strong>CSS</strong>:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  #legend:hover div 
          {left:-60px !important;top:28px}
  #linkdiv:hover div 
          {left:50px !important;top:24px}
  #navstatus 
          {font-weight:bold;vertical-align:middle}
  .dynamicdropdown {
      height: 30px;
      width: 250px;
      top:100%;
      z-index:5
  }
  #mapnavbox  {position:relative
              ;z-index:5
              ;text-align:left
              ;background-color:#F2FBFA
              ;padding:4px
              ;border:1px solid #666666
              ;width: 99%
              ;height:24px
              ;clear:both
              }   
  .mapnav     {position:relative
              ;text-align:center
              ;background-color:#F2FBFA
              ;padding:4px
              ;width: 150px
              ;float:right
              ;z-index: 1000;
              }   
  /*on hover over mapnav elements, bring div children back from banishment to off-stage left. */
  .mapnav:hover div
              {left:0px; top:24px}
  /*banish mapnav div child to off-stage left. */
  .hiddenmenu {background-color:#F2FBFA !important
              ;border:solid #666666 1px
              ;position:absolute
              ;z-index: 1000
              ;top:100%
              ;left:-9999px /* Hide off-screen when not needed (this is more accessible than display:none;) */}                   
  
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>Code for the hover menu/drop down section</strong>:</p>
  
  <pre><code>&lt;div id='params' class='mapnav' &gt; 
          &lt;strong&gt;Change Parameter&lt;/strong&gt;
  &lt;div class="hiddenmenu" style="height:200px"&gt;
  
  &lt;!---Setup the form fields for data selection---&gt;
  
  &lt;form name="form2" id="form2" method="post" &gt;
  &lt;cfoutput&gt;
       &lt;select name="dddmon" class="dynamicdropdown" id="dddmon" &gt;
       &lt;option value="0" &gt;Month&lt;/option&gt;
             &lt;cfloop from="1" to="12" step="1" index="selmon" &gt;
                 &lt;option value="#selmon#" &gt;#MonthAsString(selmon)#&lt;/option&gt;
            &lt;/cfloop&gt;
  &lt;/select&gt;
  
     &lt;select name="myear" id="myear" class="dynamicdropdown"&gt;
     &lt;option value = "0"&gt;Year&lt;/option&gt;
          &lt;cfloop query="availableyears" &gt;
              &lt;option value="#year#"&gt;#year#&lt;/option&gt;
         &lt;/cfloop&gt;
  &lt;/select&gt;
  
  &lt;select name="wqparm_sel" class="dynamicdropdown" id="wqparm_sel"&gt;
       &lt;optgroup label="Parameters:"&gt;
       &lt;option value="1" selected="selected"&gt;Bottom DO (mg/l)&lt;/option&gt;
       &lt;option value="2"&gt;Secchi Depth (meters)&lt;/option&gt;
       &lt;option value="3"&gt;Salinity (ppt)&lt;/option&gt;
       &lt;option value="4"&gt;Water Temperature (°F)&lt;/option&gt;
       &lt;option value="5"&gt;pH&lt;/option&gt;
       …
       Etc.
       …
       &lt;/optgroup&gt;
  &lt;/select&gt;
                  &lt;/cfoutput&gt; 
  
  &lt;input name="thesubmit" type="button" value="Submit" 
                  onClick="populateMap(jQuery('#dddmon').val(),jQuery('#myear').val(),jQuery('#wqparm_sel').val()); showData(); getmyLegend(); ga('send', 'event', { eventCategory: 'SubmitButton', eventAction: 'click', eventLabel: 'CurrentConditions', eventValue: 1});"/&gt;
        &lt;/form&gt;
  </code></pre>
  
  <p>Any insight or guidance would be very much appreciated!</p>