title: Menu Item Hover JavaScript
body: <p>If someone could help me point in the right direction that would be awesome as I have been looking for a solution to this issues for hours.</p>
  
  <p><a href="http://jamessuske.com/will/" rel="nofollow">http://jamessuske.com/will/</a></p>
  
  <p>I have a menu with 3 menu items on it. if you hover over the last two menu items, a div with items from a different list appear. That part works fine, but if I go to roll over the other menu items from another list, they disappear again.</p>
  
  <p>This is my JavaScript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  function showGalleryNav(){
  
  document.getElementById('headerNavGallery').style.display = "";
  
  }
  
  function showInfoNav(){
  
  document.getElementById('headerNavInfo').style.display = "";
  
  }
  
  
  function hideGalleryNav(){
  
  document.getElementById('headerNavGallery').style.display = "none";
  
  }
  
  function hideInfoNav(){
  
  document.getElementById('headerNavInfo').style.display = "none";
  
  }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>And The HTML</p>
  
  <pre><code>&lt;div class="headerNav"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" onmouseover="javascript:showGalleryNav()" onmouseout="javascript:hideGalleryNav()"&gt;Gallery&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#" onmouseover="javascript:showInfoNav()" onmouseout="javascript:hideInfoNav()"&gt;Info&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;&lt;!--headerNav--&gt;
  
  &lt;div class="headerNavGallery" id="headerNavGallery" style="display:none;"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Categoies&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Products&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;&lt;!--headerNavGallery--&gt;
  
  &lt;div class="headerNavInfo" id="headerNavInfo" style="display:none;"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;William Ruppel&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;CV&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Artist Bio&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Video&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;&lt;!--headerNavInfo--&gt;
  </code></pre>
  
  <p>I've tried different Attributes, but none of them are working, I have also tried switching to jQuery with</p>
  
  <pre><code>$('#headerNavGallery").css("display", "");
  </code></pre>
  
  <p>also didn't work,</p>
  
  <p>Any ideas would be greatly apperiated.</p>