css下拉菜单怎么做jq

CSS下拉菜单在网页设计中有着广泛的应用，可以方便用户进行菜单选择，提高网站的易用性和可访问性。本文将介绍如何使用jQuery实现CSS下拉菜单。

首先，在HTML中创建一个ul列表，每一项作为一个菜单，下一级菜单放在li标签的ul内部。代码如下：

<ul id="menu">
  <li><a href="#">菜单1</a>
    <ul class="submenu">
      <li><a href="#">子菜单1-1</a></li>
      <li><a href="#">子菜单1-2</a></li>
    </ul>
  </li>
  <li><a href="#">菜单2</a>
    <ul class="submenu">
      <li><a href="#">子菜单2-1</a></li>
      <li><a href="#">子菜单2-2</a></li>
    </ul>
  </li>
</ul> 

接着，在CSS中设置菜单和子菜单的样式，并隐藏子菜单。代码如下：

#menu{list-style:none;}
#menu li{float:left;}
#menu a{display:block;padding:5px;color:#888;}
.submenu{display:none;position:absolute;}
.submenu li{float:none;}
.submenu a{white-space:nowrap;}
#menu li:hover .submenu{display:block;} 

然后，在jQuery中编写代码，实现鼠标滑过显示下拉菜单的效果。代码如下：

$(document).ready(function(){
  $("#menu li").hover(function(){
    $(this).find(".submenu").fadeIn("fast");
  },
  function(){
    $(this).find(".submenu").fadeOut("fast");
  });
}); 

最后，在HTML中引入jQuery库和CSS文件。代码如下：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="style.css"> 

至此，一个简单的CSS下拉菜单就完成了，通过jQuery实现了鼠标滑过菜单显示子菜单的交互效果。