445day（下拉菜单案例）

最新推荐文章于 2023-01-16 10:34:48 发布

原创最新推荐文章于 2023-01-16 10:34:48 发布 · 242 阅读

0 ·

CC 4.0 BY-SA版权

本文详细介绍了使用HTML和jQuery实现的下拉菜单案例。通过鼠标悬停在一级菜单上显示二级菜单，展示了基本的网页交互设计。代码中包含了完整的HTML结构和jQuery事件处理，适合初学者学习。

《2018年12月23日》【连续445天】

标题：下拉菜单案例；
内容：

<body>
  <div class="wrap">
  <ul>
    <li>
      <a href="javascript:void(0);">一级菜单1</a>
      <ul class="ul">
        <li><a href="javascript:void(0);">二级菜单11</a></li>
        <li><a href="javascript:void(0);">二级菜单12</a></li>
        <li><a href="javascript:void(0);">二级菜单13</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);">一级菜单2</a>
      <ul>
        <li><a href="javascript:void(0);">二级菜单21</a></li>
        <li><a href="javascript:void(0);">二级菜单22</a></li>
        <li><a href="javascript:void(0);">二级菜单23</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:void(0);">一级菜单3</a>
      <ul>
        <li><a href="javascript:void(0);">二级菜单31</a></li>
        <li><a href="javascript:void(0);">二级菜单32</a></li>
        <li><a href="javascript:void(0);">二级菜单33</a></li>
      </ul>
    </li>
  </ul>
</div>


  <script>
    $(function(){
      var $li =$(".wrap>ul>li");
      $li.mouseover(function(){
        $(this).children("ul").show();
      });
      $li.mouseout(function(){
        $(this).children("ul").hide();
      });
    });
  </script>
</body>