用HTML将二级菜单栏隐藏起来,只有鼠标放到对应的一级菜单上时,二级菜单才会显示

这可以通过CSS中的:hover伪类来实现。具体步骤如下：

1. 在HTML中，给一级菜单项添加一个class或id属性，以便在CSS中选择它们。
2. 在CSS中，将二级菜单项的display属性设置为none，使其在一开始时隐藏。
3. 在CSS中，使用:hover伪类选择器来选择一级菜单项，并将其下的二级菜单项的display属性设置为block，这样当鼠标放在一级菜单项上时，对应的二级菜单项就会显示出来。

代码示例：

HTML:

<ul>
  <li class="menu-item">一级菜单1
    <ul class="sub-menu">
      <li>二级菜单1</li>
      <li>二级菜单2</li>
    </ul>
  </li>
  <li class="menu-item">一级菜单2
    <ul class="sub-menu">
      <li>二级菜单3</li>
      <li>二级菜单4</li>
    </ul>
  </li>
</ul>

CSS:

.sub-menu {
  display: none;
}

.menu-item:hover .sub-menu {
  display: block;
}

这样当鼠标放在一级菜单项上时，对应的二级菜单项就会显示出来。

相关问题

HTML代码中，怎么制作当鼠标移到框上时显示二级菜单

要制作当鼠标移到菜单框上时显示二级菜单，可以使用CSS的:hover伪类来实现。以下是一个示例：

<ul>
  <li>一级菜单1</li>
  <li>一级菜单2
    <ul>
      <li>二级菜单1</li>
      <li>二级菜单2</li>
    </ul>
  </li>
  <li>一级菜单3</li>
</ul>

ul ul {
  display: none;
}

ul li:hover > ul {
  display: block;
}

在这个示例中，我们使用CSS来隐藏所有二级菜单。然后，当鼠标悬停在一级菜单项上时，我们使用:hover伪类来选择该项下的二级菜单，并将它们显示出来。

注意，这里使用了“>”选择器来只选择一级菜单下的直接子元素，这样我们就可以避免显示所有嵌套的子菜单。

用jQuery写一个二级菜单 ，功能包括（鼠标经过二级菜单显示，离开隐藏）

HTML代码如下：

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

CSS代码如下：

.submenu {
  display: none;
}

jQuery代码如下：

$(document).ready(function() {
  $('.menu > li').hover(
    function() {
      $(this).find('.submenu').slideDown(300);
    },
    function() {
      $(this).find('.submenu').slideUp(300);
    }
  );
});

解释一下：

首先，我们用CSS将二级菜单隐藏起来。然后，我们使用jQuery在鼠标经过时显示二级菜单，在鼠标离开时隐藏二级菜单。我们使用了`hover`方法，该方法接受两个函数作为参数，第一个函数是当鼠标经过时执行的函数，第二个函数是当鼠标离开时执行的函数。在每个函数内部，我们使用`find`方法查找该菜单项下的二级菜单，然后使用`slideDown`和`slideUp`方法分别显示和隐藏二级菜单。`slideDown`和`slideUp`方法接受一个参数，表示动画的速度。