我在使用jQuery显示和隐藏下拉菜单时遇到问题

Question

我尝试过查看多个不同的来源和不同的代码。他们都没有为我工作，我不确定我的代码有什么问题。我很抱歉，如果它看起来像一个业余爱好者，因为我很年轻，并迅速将代码从我的网站复制到jsfiddle。我真的很感激任何帮助，因为我已经被困在这几天并且已经迷失了它，当它可能是简单的时候。

Link to my code

HTML：

    <div class="nav_container">
  <div class="nav_header">
  </div>
  <div class="nav_content">
    <ul class="nav_list">
      <li>
    <a href="/">
      <span>Home</span>
    </a>
      </li>
      <li id="categories_list">
    <a href="#">
          <span>Categories</span>
    </a>
      </li>
      <li id="me_list">
    <a href="#">
      <span>Me</span>
    </a>
      </li>
      <li>
    <a href="/categories/all">
      <span>Games A-Z</span>
    </a>
      </li>
    </ul>
  </div>
  <a href="/">
  <img src="/thumbs/header_image_white.png" style="position:relative; height: 103px;">
  </a>
</div>
    <div id="categories_dropdown_menu">
      <ul class="dropdown_menu">
    <li>
      <a href="/">
        <span>Action</span>
      </a>
    </li>
    <li>
      <a href="/">
        <span>Action-Adventure</span>
      </a>
    </li>
    <li>
      <a href="/">
        <span>Adventure</span>
      </a>
    </li>
    <li>
      <a href="/">
        <span>Arcade</span>
      </a>
    </li>
    <li>
      <a href="/">
        <span>Multiplayer</span>
      </a>
    </li>
    <li>
      <a href="/">
        <span>Racing</span>
      </a>
    </li>
    </br>
    <li>
      <a href="/">
        <span>Role-Playing</span>
      </a>
    </li>
    <li>
      <a href="/">
        <span>Shooting</span>
      </a>
    </li>
    <li>
      <a href="/">
        <span>Simulation</span>
      </a>
    </li>
    <li>
      <a href="/">
        <span>Sports</span>
      </a>
    </li>
    <li>
      <a href="/">
        <span>Strategy</span>
      </a>
    </li>
    <li>
      <a href="/">
        <span>All</span>
      </a>
    </li>
      </ul>
</div>

脚本：

<script> 
 $(document).ready(function(){
$("#categories_list").click(function(){
    $("#categories_dropdown_menu").slideToggle("slow");
   });
});
</script>

我希望下拉菜单是整个页面的宽度，这就是ul不在categories_list内的原因。

编辑：我的不好，我忘了包含下拉菜单，虽然我以为我有。我更新了链接和HTML。如果你现在可以看一下，那就太好了。谢谢。

Answer 1

你没有在jsFiddle中包含jQuery。

在JS部分中，您不需要包含脚本标记。

<强> DEMO

而不是上面显示下拉菜单的方法，我更喜欢纯CSS方法来显示下拉菜单：

ul.nav_list li ul {
 display: none;
}
ul.nav_list li:hover ul {
   display: block;
  /* make position absolute and give width to be 100% to make it take full width*/
}

<ul class="nav_list">
<li> <a href="/">
  <span>Home</span>
</a>

</li>
<li id="categories_list"> <a href="#">
      <span>Categories</span>
</a>

    <ul class="dropdown_menu">
        <li> <a href="/">
<span>Action</span>
  </a>

        </li>
        <li> <a href="/">
<span>Action-Adventure</span>
  </a>

        </li>
        <li> <a href="/">
<span>Adventure</span>
  </a>

        </li>
        <li> <a href="/">
<span>Arcade</span>
  </a>

        </li>
        <li> <a href="/">
<span>Multiplayer</span>
  </a>

        </li>
        <li> <a href="/">
<span>Racing</span>
  </a>

        </li>
       
        <li> <a href="/">
<span>Role-Playing</span>
  </a>

        </li>
        <li> <a href="/">
<span>Shooting</span>
  </a>

        </li>
        <li> <a href="/">
<span>Simulation</span>
  </a>

        </li>
        <li> <a href="/">
<span>Sports</span>
  </a>

        </li>
        <li> <a href="/">
<span>Strategy</span>
  </a>

        </li>
        <li> <a href="/">
<span>All</span>
  </a>

        </li>
    </ul>
</li>
<li id="me_list"> <a href="#">
  <span>Me</span>
</a>

</li>
<li> <a href="/categories/all">
  <span>Games A-Z</span>
</a>

</li>
</ul>

在您的网页中，您需要进行一些CSS更改：

ul.nav_list li:hover ul {
  display: block;
  position: absolute;
  top: 26px;
  background: gray;
}

.nav_content {
 // remove overflow: hidden;
}

图像：