二级、三级纵向导航菜单的代码 用div 类名用nav1

好的，以下是一个简单的二级、三级纵向导航菜单的代码，使用了 div 元素和类名为 nav1：

<div class="nav1">
  <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>
        <li>
          <a href="#">子菜单3</a>
          <ul>
            <li><a href="#">孙子菜单1</a></li>
            <li><a href="#">孙子菜单2</a></li>
            <li><a href="#">孙子菜单3</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">菜单3</a></li>
  </ul>
</div>

CSS 样式可以根据需求进行自定义，以下是一个简单的样式：

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

.nav1 li {
  position: relative;
}

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

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

.nav1 a {
  display: block;
  padding: 10px;
  background-color: #eee;
  text-decoration: none;
  color: #333;
}

.nav1 a:hover {
  background-color: #ccc;
}

在这个样式中，我们使用了伪类选择器 `:hover` 来显示子菜单。同时，我们对菜单和子菜单都使用了相同的样式，可以根据需求进行修改。