title: JavaScript or jQuery on html form
body: <p>This is as clear as I know how to be with this issue. I've done what research I can on fixing it, and since it is someone else' work being modified it's hard to find what to do. I am nowhere near proficient enough to do this on my own. Sorry if it's not clear enough!</p>
  
  <p>This theme is no longer supported even though it's pretty new <a href="http://my-horse.com.au" rel="nofollow noreferrer">my-horse.com.au</a>. At the top of the page when you hover on the search icon a search area drops down and shows a search area with a few select boxes.</p>
  
  <p>This is the basic on how the form is set up. #search-hover contains #search and #search contains the form. The only issue happens on the select boxes, not standard input boxes.</p>
  
  <pre><code>&lt;div id="search-hover" style="height: 70px;"&gt;
    &lt;div id="search"&gt;
      &lt;form id="search-spots" action="http://my-horse.com.au" method="post"&gt;
    &lt;span id="finish-filter" class="responsive-only"&gt;&lt;i class="icon-ok"&gt;&lt;/i&gt; Finish Filtering&lt;/span&gt;
    &lt;div class="large-4 columns" id="search-form-column-1"&gt;
      &lt;label class="sf_if_1222"&gt;Country&lt;/label&gt;
      &lt;input type="hidden" name="has_changed_country" id="has_changed_country" value="false"&gt;
      &lt;div class="select-replace parent-1222 sf_if_1222 type-dropdown"&gt;
        &lt;select name="country" class="parent-1222 sf_if_1222 type-dropdown" onchange="jQuery('#has_changed_country').val('true');  jQuery('#search-spots').submit(); jQuery('#has_changed_country').val('false');" style="display: block; opacity: 0;"&gt;
          &lt;option value=""&gt;All&lt;/option&gt;
          &lt;option value="587"&gt;Australia&lt;/option&gt;
          &lt;option value="3270"&gt;New Zealand&lt;/option&gt;
          &lt;option value="2471"&gt;United States&lt;/option&gt;
          &lt;option value="1409"&gt;United Kingdom&lt;/option&gt;
          &lt;option value="4103"&gt;France&lt;/option&gt;
          &lt;option value="4291"&gt;Germany&lt;/option&gt;
          &lt;option value="1291"&gt;Italy&lt;/option&gt;
          &lt;option value="3322"&gt;Spain&lt;/option&gt;
        &lt;/select&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The issue only exists in IE (hahah) as far as I've seen. I've tried a few things using JS to fix the issue, but I'm not very good with it. What happens is when you click the select box and hover over anythin in the dropdown list, the whole search area slides back up.
  This is some of the different scripts I've tried without any results yet.</p>
  
  <pre><code>onMouseEnter="document.getElementById('search-hover').style.height = '281px';
  onMouseExit="document.getElementById('search-hover').style.height = '70px';
  onMouseOver="document.getElementById('search-hover').style.height = '281px';
  onMouseOut="document.getElementById('search-hover').style.height = '70px';
  onFocus="document.getElementById('search-hover').style.height = '281px';
  $("#search select").mouseenter(function () {
  $('#search-hover').css({"height","281px"});
  });
  
  $("#search select").mouseleave(function () {
  $('#search-hover').css({"height", "70px"});
  });
  </code></pre>
  
  <p>and this is the jQuery that I think controls the search area</p>
  
  <p><a href="http://pastebin.com/m3J9DLNH" rel="nofollow noreferrer">http://pastebin.com/m3J9DLNH</a></p>
  
  <p>Can anyone help me with where I might be going wrong or point me in the right direction?</p>
  
  <p>My idea is something like this -</p>
  
  <p><code>onFocus = get.elementId('search select')</code> then something that tells the CSS for <code>#search-hover</code> to set the <code>height</code> to <code>281px</code></p>
  
  <p>something that will run through the whole site easy enough. From what I've read on different forums, IE leaves the 'div' area when it enters the drop down area in a form . I'm not really sure why but it is apparently something that happens a lot. I'm basing what I've found on this
  <a href="https://stackoverflow.com/questions/3702354/ie-select-issue-with-hover">IE select issue with hover</a>
  which I tried to figure out how to implement in to my form, but don't know how since I'm not any good with JS.</p>
  
  <p>Thank you for any help you can give!</p>