二级菜单

<cd class="menu-container"> <a href="#" class="menu-trigger">meow</a> <div class="submenu"> <ul> <li> <a href="#" class="submenu-item submenu-trigger" id="option-1">meow 1</a> <div class="submenu-2" id="submenu-2"> <ul> <li><a href="#">meow 1</a></li> <li><a href="#">meow 2</a></li> </ul> </div> <a href="#" class="submenu-item">meow 1</a> <a href="#" class="submenu-item">meow 2</a> <a href="#" class="submenu-item">meow 3</a> </li> </ul> </div> </cd> <style> body{background:url('');}.submenu, .submenu-2{display:none;position:absolute;background:#fff6;border:1px solid #fff;width:166px;z-index:1234;border-radius:15px;}.submenu-2{top:-1px;left:100%;}.submenu ul{list-style:none;padding:0;margin:0;}.submenu ul li a{display:block;padding:10px;text-decoration:none;color:#000;border-radius:15px;}.menu-container:hover .submenu, .submenu ul li:hover>.submenu-2{display:block;}.menu-trigger:hover, .submenu-item:hover, .submenu-2 a:hover{background-color:#ffffff66;}</style> <script> const option1 = document.getElementById("option-1");const submenu2 = document.getElementById("submenu-2");const menuContainer = document.querySelector(".menu-container");option1.addEventListener("mouseover", () => submenu2.style.display = "block");menuContainer.addEventListener("mouseleave", () => submenu2.style.display = "none");option1.addEventListener("mouseout", (e) =>{if (!submenu2.contains(e.relatedTarget)) submenu2.style.display = "none";});submenu2.addEventListener("mouseover", () => submenu2.style.display = "block");submenu2.addEventListener("mouseout", (e) =>{if (!submenu2.contains(e.relatedTarget)) submenu2.style.display = "none";});option1.addEventListener("click", (e) =>{e.preventDefault();submenu2.style.display = submenu2.style.display === "block" ? "none":"block";});</script>