通用的二级菜单代码(css+javascript)

一、CSS部分

一、CSS部分

1. 菜单样式设置

对于菜单样式设置，可以使用以下 CSS 属性：

.menu {
    list-style: none; /* 去掉默认的贡献，使其显示为列表项形式 */
    position: relative; /* 绝对定位父元素，默认隐藏下拉菜单 */
    z-index: 1; /* 只有z-index属性是大于等于1，才算浮动在文档流之上 */
}

.menu > li {
    float: left; /* 将列表项横向排列 */
    position: relative; 
}

.menu > li > a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #333;
    background-color: #f2f2f2;
}

.menu > li:hover > a /* 鼠标悬浮时的颜色 */
.menu > li:focus > a /* 获得焦点时的颜色 */
.menu > .current > a /* 当前项的颜色 */
{
    background-color: #ccc;
}

1. 下拉菜单样式设置

对于下拉菜单，可以设置以下 CSS 属性：

.sub-menu {
    display: none; /* 默认隐藏下拉菜单 */
    position: absolute; /* 绝对定位子元素 */
    top: 100%; /* 将下拉菜单设置在父元素的下方 */
    left: 0; /* 将下拉菜单从左边界对齐 */
    z-index: 2; /* z-index 属性大于父元素，使其浮在父元素之上 */
}

.menu > li:hover > .sub-menu {
    display: block; /* 鼠标悬浮时显示下拉菜单 */
}

二、JavaScript 部分

1. 获取元素

首先，要获取菜单和下拉菜单的相关元素，可以使用以下代码：

const menu = document.querySelector('.menu'); /* 获取菜单列表 */
const menuItems = Array.from(menu.querySelectorAll('li')); /* 获取所有菜单列表项 */
const subMenus = Array.from(menu.querySelectorAll('.sub-menu')); /* 获取所有下拉菜单 */

1. 设计交互

接下来，设计与用户的交互效果。

menuItems.forEach((item, index) => {
  const subMenu = subMenus[index];
  item.addEventListener('mouseenter', () => {
    subMenu.classList.add('active');
  });
  item.addEventListener('mouseleave', () => {
    subMenu.classList.remove('active');
  });
});

鼠标移入后，添加一个 active 类名，实现下拉菜单的逐渐出现。鼠标移出后，移除 active 类名，实现下拉菜单的逐渐隐藏。

1. 完整示例说明

下面给出一个完整的示例：

HTML：

<ul class="menu">
  <li>
    <a href="#">一级菜单1</a>
    <ul class="sub-menu">
      <li><a href="#">二级菜单1-1</a></li>
      <li><a href="#">二级菜单1-2</a></li>
      <li><a href="#">二级菜单1-3</a></li>
    </ul>
  </li>
  <li><a href="#">一级菜单2</a></li>
  <li>
    <a href="#">一级菜单3</a>
    <ul class="sub-menu">
      <li><a href="#">二级菜单3-1</a></li>
      <li><a href="#">二级菜单3-2</a></li>
      <li><a href="#">二级菜单3-3</a></li>
    </ul>
  </li>
</ul>

CSS：

.menu {
    list-style: none; /* 去掉默认的贡献，使其显示为列表项形式 */
    position: relative; /* 绝对定位父元素，默认隐藏下拉菜单 */
    z-index: 1; /* 只有z-index属性是大于等于1，才算浮动在文档流之上 */
}

.menu > li {
    float: left; /* 将列表项横向排列 */
    position: relative; 
}

.menu > li > a {
    display: block;
    padding: 10px;
    text-decoration: none;
    color: #333;
    background-color: #f2f2f2;
}

.menu > li:hover > a /* 鼠标悬浮时的颜色 */
.menu > li:focus > a /* 获得焦点时的颜色 */
.menu > .current > a /* 当前项的颜色 */
{
    background-color: #ccc;
}

.sub-menu {
    display: none; /* 默认隐藏下拉菜单 */
    position: absolute; /* 绝对定位子元素 */
    top: 100%; /* 将下拉菜单设置在父元素的下方 */
    left: 0; /* 将下拉菜单从左边界对齐 */
    z-index: 2; /* z-index 属性大于父元素，使其浮在父元素之上 */
}

.menu > li:hover > .sub-menu {
    display: block; /* 鼠标悬浮时显示下拉菜单 */
}

JavaScript：

const menu = document.querySelector('.menu'); /* 获取菜单列表 */
const menuItems = Array.from(menu.querySelectorAll('li')); /* 获取所有菜单列表项 */
const subMenus = Array.from(menu.querySelectorAll('.sub-menu')); /* 获取所有下拉菜单 */

menuItems.forEach((item, index) => {
  const subMenu = subMenus[index];
  item.addEventListener('mouseenter', () => {
    subMenu.classList.add('active');
  });
  item.addEventListener('mouseleave', () => {
    subMenu.classList.remove('active');
  });
});