子菜單將內容懸停在主菜單元素上

Question

我正在嘗試學習為導航欄構建一個下拉菜單。 我想要一個主要元素，上面寫着“音樂”，然后是2個子菜單，分別是“歌曲”和“專輯”，然后我希望鏈接列表（歌曲，專輯）出現在懸停上。 但是，當我將鼠標懸停在主要元素上時，我的元素的所有子內容也會顯示，並且我想阻止這種情況的發生，直到將子菜單（專輯或歌曲）懸停了為止。

我嘗試過在CSS中進行一些翻轉，嘗試了所有我能想到的組合。 我以為我錯過了什么。

的HTML

 nav ul ul li li { display: none; background-color: yellow; } nav ul ul:hover li li { display: block; } nav ul ul li { display: none; background-color: red; } nav ul { position: relative; background-color: pink; } nav ul :hover li { display: block; }

 <div class="wrapper"> <nav> <ul> <li>Music <ul> <li>Songs <ul> <li><a href="#"> Blue slide park</a></li> <li>Albums <ul> <li><a href="#">KIDS</a></li> </ul> </li> </ul> </li> </ul> </li> </ul> </nav> </div>

****編輯*****

我修復了HTML，請僅關注CSS。

Answer 1

？

 nav ul ul li li { display: none; background-color: yellow; } nav ul ul:hover li li { display: block; } nav ul ul li { display: none; background-color: red; } nav ul { position: relative; background-color: pink; } nav ul :hover li { display: block; } nav ul li ul li ul{ display:none; } nav ul li ul li:hover ul{ display:block; } nav ul li ul li ul li .x2{ display:none; } .x1:hover .x2{ display:block; }

 <header> <H2>My Web Page</H2> </header> <body> <div class="wrapper"> <nav> <ul> <li>Music <ul> <li>Songs <ul> <li><a href="#"> Blue slide park</li> <li class="x1">Albums <ul class="x2"> <li><a href="#">KIDS</li> </ul> </li> </ul> </li> </ul> </li> </ul> </nav> </div> </body>

Answer 2

您可以使用子組合器 >選擇元素的直接子代。

 nav > ul ul{ display: none; } nav > ul li:hover > ul{ display: block; }

 <header> <H2>My Web Page</H2> </header> <body> <div class="wrapper"> <nav> <ul> <li>Music <ul> <li>Songs <ul> <li>Blue side parks</li> <li>Albums</li> </ul> </li> </ul> </li> </ul> </nav> </div> </body> </html>

子菜單將內容懸停在主菜單元素上

問題描述

2 個解決方案

解決方案1
1 2018-12-21 19:41:22

解決方案2
1 已采納 2018-12-21 19:42:52

子菜單將內容懸停在主菜單元素上

問題描述

2 個解決方案

解決方案1 1 2018-12-21 19:41:22

解決方案2 1 已采納 2018-12-21 19:42:52

解決方案1
1 2018-12-21 19:41:22

解決方案2
1 已采納 2018-12-21 19:42:52