javascript hover function for submenu

Question

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 one point I had working with onmouseover/mouseout but it only worked on 1 of the menus.

I'm sure it is something simple I have overlooked, but any help would be appreciated.

http://jsfiddle.net/N3TyT/

jQuery(document).ready(function($) {
$('#top-menu').hover(
  function () {
    $('#submenu').show(active);
  },
  function () {
    $('#submenu').hide(non-active);
  }
);
});

<ul id="menu" class="nav-menu">
    <li>Home</li>
    <li id="top-menu"><a href="#">About Us</a>
    </li>
    <ul id="submenu" class="sub-menu non-active">
        <li>US</li>
        <li>Our Style</li>
        <li>The Experience</li>
    </ul>
    <li id="top-menu"><a href="#">Galleries</a>
    </li>
    <ul id="submenu" class="sub-menu non-active">
        <li>Weddings</li>
        <li>Engagements</li>
        <li>Featured Weddings</li>
    </ul>
    <li id="top-menu"><a href="#">The Details</a>
    </li>
    <ul id="submenu" class="sub-menu non-active">
        <li>Investment</li>
        <li>Press and Awards</li>
        <li>Testimonials</li>
    </ul>
    <li>FAQ</li>
    <li>Contact</li>
    <li>The Blog</li>
</ul>

.nav-menu {
    list-style-type:none;
    text-align:center;
    text-transform:uppercase;
    font-weight:bold;
    font: 24px'Playfair Display', Georgia, serif;
}
.navmenu ul li {
    margin:30px;
}
.non-active {
    display:none;
}
.active {
    display:inline;
}

Answer 1

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();
  }
);

Answer 2

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.

http://jsfiddle.net/EmcPY

HTML

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

CSS

ul.menu li ul {
    display:none;
}

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

Answer 3

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

Answer 4

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.

Answer 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