Javascript Hover Function For Submenu

I'm pretty new at trying to understand javascript and I've been pooling over multiple examples trying to figure out what I'm doing wrong, but cant get this working properly. At on

Solution 1:

It doesn't answer your specific question but the same behavior can be easily achieved with css. This way you don't depend on javascript being turned on for standard menu access.

ul.menu li ul {
  display: none;
}

ul.menu li:hover ul {
  display: block;
  position: relative;
}

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li>
    <a href="#">Galleries</a>
    <ul>
      <li>Gallery #1</li>
      <li>Gallery #2</li>
    </ul>
  </li>
  <li>
    <a href="#">Albums</a>
    <ul>
      <li>Album #1</li>
      <li>Album #2</li>
    </ul>
  </li>
</ul>

View on jsFiddle

Solution 2:

You are using hide and show wrong. http://api.jquery.com/show/ http://api.jquery.com/hide/

http://jsfiddle.net/eXKV9/

$('#top-menu').hover(
  function () {
    $('#submenu').show();
  },
  function () {
    $('#submenu').hide();
  }
);

Solution 3:

id must be unique. If you have multiple elements with the same id, jquery will not retrieve all the elements when you do $('#top-menu'), it'll only find the first element that matches the selector.

Solution 4:

We're going to need to change the HTML a bit. IDs are used only once on a page. Classes are similar, but can be applied to any number of elements. We also want to nest our sub-menu's under the top-menu. That way the association is more clear.

<li class="top-menu"><a href="#">About Us</a>
    <ul class="sub-menu non-active">
        <li>Ashley + David</li>
        <li>Our Style</li>
        <li>The Experience</li>
    </ul>
</li>

We want to specify the nested sub-menu to show or hide. $(this) refers to the top-menu that was hovered over.

$('.top-menu').hover(
  function () {
    $(this).find('.sub-menu').show("slow");
  },
  function () {
    $(this).find('.sub-menu').hide("slow");
  }
);

demo

Solution 5:

I updated your work. Is this what are trying to establish?

$('#top-menu').mouseover(function(){
    $('#submenu').addClass('active');
});
$('#top-menu').mouseout(function(){
    $('#submenu').removeClass('active');
});

JSFiddle Demo