HTML5二级栏目怎么做

HTML5 中实现二级栏目的方式主要有两种，一种是使用 HTML5 新增的 nav 和 menu 元素，另一种是使用 ul 和 li 元素结合 CSS 和 JavaScript 实现。下面分别介绍这两种方式的具体实现方法：

1. 使用 nav 和 menu 元素

nav 元素表示导航，menu 元素表示菜单。可以使用 nav 元素包含主导航栏目，然后在主导航栏目中使用 menu 元素包含二级栏目。示例代码如下：

<nav>
  <ul>
    <li><a href="#">主导航栏目1</a></li>
    <li><a href="#">主导航栏目2</a>
      <menu>
        <li><a href="#">二级栏目1</a></li>
        <li><a href="#">二级栏目2</a></li>
      </menu>
    </li>
    <li><a href="#">主导航栏目3</a></li>
  </ul>
</nav>

2. 使用 ul 和 li 元素结合 CSS 和 JavaScript 实现

可以使用 ul 和 li 元素创建菜单列表，然后使用 CSS 设置布局和样式，使用 JavaScript 控制菜单的展开和关闭。示例代码如下：

<ul>
  <li><a href="#">主导航栏目1</a></li>
  <li><a href="#">主导航栏目2</a>
    <ul>
      <li><a href="#">二级栏目1</a></li>
      <li><a href="#">二级栏目2</a></li>
    </ul>
  </li>
  <li><a href="#">主导航栏目3</a></li>
</ul>

然后使用 CSS 设置样式，示例代码如下：

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

ul li {
  position: relative;
  display: inline-block;
}

ul li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
}

ul li:hover ul {
  display: block;
}

最后使用 JavaScript 控制菜单的展开和关闭，示例代码如下：

var menuItems = document.querySelectorAll('ul li');

for (var i = 0; i < menuItems.length; i++) {
  menuItems[i].addEventListener('mouseenter', function() {
    var subMenu = this.querySelector('ul');
    if (subMenu) {
      subMenu.style.display = 'block';
    }
  });

  menuItems[i].addEventListener('mouseleave', function() {
    var subMenu = this.querySelector('ul');
    if (subMenu) {
      subMenu.style.display = 'none';
    }
  });
}

这样就可以实现 HTML5 中的二级栏目了。