nav标签如何嵌套两级子菜单

要嵌套两级子菜单，可以使用以下 HTML 代码：

<nav>
  <ul>
    <li><a href="#">菜单项 1</a>
      <ul>
        <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>
        <li><a href="#">子菜单项 1</a></li>
        <li><a href="#">子菜单项 2</a></li>
        <li><a href="#">子菜单项 3</a></li>
      </ul>
    </li>
  </ul>
</nav>

注意，在第一级菜单项下，嵌套了一个 `<ul>` 元素，而在第二级子菜单项下，又嵌套了一个 `<ul>` 元素。同时，在 CSS 样式中，需要设置子菜单的 `display` 属性为 `none`，并在鼠标悬浮在父菜单上时，将其设置为 `block` 以显示子菜单。

相关问题

nav标签嵌套两级子菜单，给第二级子菜单添加鼠标点击才能显示的效果

可以利用CSS中的:checked伪类来实现鼠标点击才能显示的效果。具体方法如下：

1. 首先，在第一级菜单的每一个选项后面添加一个隐藏的复选框，例如：

<nav>
  <ul>
    <li><label for="sub1">选项1</label><input type="checkbox" id="sub1"/>
      <ul>
        <li>子选项1</li>
        <li>子选项2</li>
      </ul>
    </li>
    <li><label for="sub2">选项2</label><input type="checkbox" id="sub2"/>
      <ul>
        <li>子选项3</li>
        <li>子选项4</li>
      </ul>
    </li>
  </ul>
</nav>

2. 然后，利用CSS的:checked伪类来控制第二级菜单的显示和隐藏，例如：

nav ul ul {
  display: none;
}

nav ul li input:checked + ul {
  display: block;
}

这段代码的意思是，将第二级菜单的默认显示设置为none，当第一级菜单的复选框被选中时，第二级菜单的显示设置为block。

这样，当用户点击第一级菜单的选项时，会同时选中该选项对应的复选框，从而显示该选项下的第二级菜单。

nav标签嵌套两级子菜单，添加如下效果：当鼠标单击一级菜单时，实现二级菜单的展开或收缩

可以使用jQuery来实现这个效果。首先，为每个一级菜单绑定点击事件，然后在点击事件中判断当前二级菜单的状态，如果是展开的，则收缩，如果是收缩的，则展开。代码如下：

<nav>
  <ul>
    <li><a href="#">一级菜单1</a>
      <ul>
        <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>
        <li><a href="#">二级菜单4</a></li>
        <li><a href="#">二级菜单5</a></li>
        <li><a href="#">二级菜单6</a></li>
      </ul>
    </li>
  </ul>
</nav>

$(function() {
  $('nav ul li').click(function() {
    var subMenu = $(this).find('ul');
    if (subMenu.is(':visible')) {
      subMenu.slideUp();
    } else {
      subMenu.slideDown();
    }
  });
});

这段代码会监听`nav`标签下所有`li`元素的点击事件，当点击一级菜单时，会找到对应的二级菜单，判断其当前状态是展开还是收缩，然后执行相应的动画效果。