子菜单的 javascript 悬停功能

我在尝试理解 javascript 方面还很陌生，我一直在收集多个示例，试图找出我做错了什么，但无法让它正常工作。在某一时刻，我曾使用过 onmouseover/mouseout，但它只适用于其中一个菜单。

我确信这是我忽略的简单事情，但任何帮助将不胜感激。

http://jsfiddle.net/N3TyT/ 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;
}

它没有回答您的具体问题，但使用 css 可以轻松实现相同的行为。这样您就不需要依赖打开的 JavaScript 来进行标准菜单访问。

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 http://jsfiddle.net/EmcPY