使用 CSS 和 JS 創建下拉菜單

Question

我無法創建嵌套在導航欄中的簡單下拉菜單。 我有它，所以當你在導航鏈接下拉列表上出現 hover 時，它會在你向下移動到框中時消失 - 你不能。 我希望能夠在下拉框中導航。 我一直在嘗試使用 CSS 執行此操作，最近嘗試使用 JS（雖然我對 JS 非常陌生，所以抱歉，請耐心等待）我無法理解如何連接和應用 CSS ZA2F2ED4F8EBC2CBB4C21A2 僅適用於 JS當你想要它時。

 const dropdown = document.querySelector('.second-nav-list-wrapper') dropdown.onmouseenter = () => { dropdown.classList.toggle('second-nav-list') }

 .second-nav{ position:relative; }.second-nav-list{ visibility:hidden; list-style:none; font-family:'Raleway'; text-transform:uppercase; color:grey; position:absolute; top:10px; background-color:rgb(235, 245, 252); text-align:left; padding:10px; line-height: 40px; display:flex; }.second-nav-link{ text-decoration:none; color:rgb(59, 53, 53); }.header-nav-link-dropdown:hover.second-nav.second-nav-list{ visibility:visible; text-decoration:none; background-color:rgb(208, 215, 230); }

 <nav class="header-wrapper"> <ul class= "header-nav"> <li class="header-nav-link-wrapper"> <a href=# class="header-nav-link">Home</a> </li> <li class="header-nav-link-wrapper header-nav-link-dropdown"> <a href=# class="header-nav-link">Recipes</a> <nav class="second-nav"> <ul class="second-nav-list"> <div class= "second-nav-list-wrapper"> <li> <a href=# class="second-nav-link">Breakfast</a> </li> <li> <a href=# class="second-nav-link">Lunch</a> </li> <li> <a href=# class="second-nav-link">Snacks</a> </li> <li> <a href=# class="second-nav-link">Dinner</a> </li> </div> </ul> </nav> </li> <li class="header-nav-link-wrapper"> <a href=# class="header-nav-link">Cookbooks</a> </li>

Answer 1

這是一種方法。 我們使用onmouseover打開下拉菜單。 我們使用onmouseleave事件來關閉它。 請注意，我們在整個導航欄上使用onmouseleave ，因此我們僅在鼠標離開導航欄及其所有子項時才關閉下拉菜單。

以下是其他鼠標 hover 事件如何表現的一些示例：

https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmousemove_leave_out https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onmouse_move

 const dropdown = document.querySelector('.second-nav-list'); const recipies = document.querySelector('.recipies'); const navbar = document.querySelector('.header-nav') //this function toggles visibiltity on recipies.onmouseover = () => { dropdown.style.visibility = "visible"; } //this one toggles it off navbar.onmouseleave = () => { dropdown.style.visibility = "hidden"; }

 .second-nav{ position:relative; } /* added background color here, removed the on-hover */.second-nav-list{ visibility:hidden; list-style:none; font-family:'Raleway'; text-transform:uppercase; color:grey; position:absolute; top:10px; text-align:left; padding:10px; line-height: 40px; display: block; background-color:rgb(208, 215, 230); color:rgb(59, 53, 53); }

 <nav class="header-wrapper"> <ul class= "header-nav"> <li class="header-nav-link-wrapper"> <a href=# class="header-nav-link">Home</a> </li> <li class="header-nav-link-wrapper header-nav-link-dropdown"> <a href=# class="header-nav-link recipies">Recipes</a> <!-- Changed --> <nav class="second-nav"> <ul class="second-nav-list"> <li> <a href=# class="second-nav-link">Breakfast</a> </li> <li> <a href=# class="second-nav-link">Lunch</a> </li> <li> <a href=# class="second-nav-link">Snacks</a> </li> <li> <a href=# class="second-nav-link">Dinner</a> </li> </ul> </nav> </li> <li class="header-nav-link-wrapper"> <a href=# class="header-nav-link">Cookbooks</a> </li> </ul> </nav>