性能问答>如何在Javascript中创建多子菜单?>
1回复

如何在Javascript中创建多子菜单?



HTML代码:

<header>
    <nav>
        <ul>
            <li class="a**enu"><a href="#">Menu1 <i class="fa fa-caret-down"></i></a>
                <ul class="submenu deactive">
                <li><a href="#">Menu1-a</a></li>
                <li><a href="#">Menu1-b</a></li>
                <li><a href="#">Menu1-c</a></li>
                <li><a href="#">Menu1-d</a></li>
                </ul>
            </li>
            <li class="a**enu"><a href="#">Menu2 <i class="fa fa-caret-down"></i></a>
                <ul class="submenu deactive">
                <li><a href="#">Menu2-a</a></li>
                <li><a href="#">Menu2-b</a></li>
                <li><a href="#">Menu2-c</a></li>
                <li><a href="#">Menu2-d</a></li>
                </ul>
            </li>
                <li><a href="#">Menu3</a></li>
                <li><a href="#">Menu4</a></li>
                <li><a href="#">Menu5</a></li>
                <li><a href="#">Menu6</a></li>
        </ul>
    </nav>
</header>

css代码:

header nav ul li {
  position: relative;
}

.submenu {
  position: absolute;
  width: 20rem;
  height: 20rem;
  background-color: darkgoldenrod;
  margin-top: 2rem;
  border-radius: 0rem 0rem 2.5rem 0rem;
}

.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

.deactive {
  display: none;
}

怎么在 Javascript 中使用这些代码制作子菜单。没有切换按钮,鼠标悬停到 menu2 时,它正在打开 menu1 的子菜单。

873 阅读
请先登录,查看1条精彩评论吧
快去登录吧,你将获得
  • 浏览更多精彩评论
  • 和开发者讨论交流,共同进步