Question

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.

http://jamessuske.com/will/

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.

This is my JavaScript:

<script type="text/javascript">

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";

}

</script>

And The HTML

<div class="headerNav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#" onmouseover="javascript:showGalleryNav()" onmouseout="javascript:hideGalleryNav()">Gallery</a></li>
<li><a href="#" onmouseover="javascript:showInfoNav()" onmouseout="javascript:hideInfoNav()">Info</a></li>
</ul>
</div><!--headerNav-->

<div class="headerNavGallery" id="headerNavGallery" style="display:none;">
<ul>
<li><a href="#">Categoies</a></li>
<li><a href="#">Products</a></li>
</ul>
</div><!--headerNavGallery-->

<div class="headerNavInfo" id="headerNavInfo" style="display:none;">
<ul>
<li><a href="#">William Ruppel</a></li>
<li><a href="#">CV</a></li>
<li><a href="#">Artist Bio</a></li>
<li><a href="#">Video</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div><!--headerNavInfo-->

I’ve tried different Attributes, but none of them are working, I have also tried switching to jQuery with

$('#headerNavGallery").css("display", "");

also didn’t work,

Any ideas would be greatly apperiated.

Answer 1

Check that typeo, nvm…
Setting the display property should always have a value “none” or “block”, empty(“”) is a bad reset… try this:

<script>
    $(".galleryNavToggle").on("mouseenter mouseleave", function(event){
    var headNavGal = $("#headerNavGallery");
    if(event.type === "mouseenter"){
      headNavGal.show();
    }else if(event.type ==="mouseleave" &&
             ((event.relatedTarget !== headNavGal[0] && $.inArray(event.relatedTarget, headNavGal.find("*")) <=0) ||
             $.inArray(event.relatedTarget, $(".galleryNavInfoToggle")) > 0)){
        headNavGal.hide();
    }
});
$("#headerNavGallery").on("mouseleave", function(event){
    var headNavGal = $(this);
    if(event.type ==="mouseleave"){
        headNavGal.hide();
    }
});

</script>

HTML

<div class="headerNav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="" class='galleryNavToggle'>Gallery</a></li>
<li><a href="" class='galleryNavInfoToggle'>Info</a></li>
</ul>
</div><!--headerNav-->

<div class="headerNavGallery" id="headerNavGallery" style="display:none;">
<ul>
<li><a href="#">Categoies</a></li>
<li><a href="#">Products</a></li>
</ul>
</div><!--headerNavGallery-->

AND CSS

.headerNav{
     border:thin solid black;
     float:left;
}
.headerNavGallery{
 float:left;
 border:thin solid black;
  margin-left:-1px;
}