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.

/

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

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/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;
}

• javascript
• drop-down-menu
• submenu

• First step, check errors in console. – elclanrs Commented Mar 9, 2013 at 8:54
• 2 Please could you briefly tell us what you are trying to achieve? – Simon Adcock Commented Mar 9, 2013 at 8:56

5 Answers 5

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

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

http://jsfiddle/eXKV9/

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

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.

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

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