css下拉不起作用

Question

練習錨點標記和下拉菜單。在下面的代碼中，下拉菜單不起作用。不知道爲什麼。包含文本「這是下拉菜單」的div應該顯示在包含文本「這是文本，它的中心」的div的正下方，只要後者被擱置。兩個div的寬度都相同。

html,body { 
 
\t margin: 0px; 
 
\t height: 100%; 
 
\t /* [disabled]width: 100%; */ 
 
\t left: 0px; 
 
\t top: 0px; 
 
\t background-color: rgba(255,255,255,1); 
 
} 
 

 
.wrapper { 
 
\t text-align: center; 
 
\t margin-top: 0; 
 
\t margin-left: auto; 
 
\t height: 100%; 
 
\t max-width: 960px; 
 
\t background-color: rgba(0,0,0,1); 
 
\t margin-right: auto; 
 
\t position: relative; 
 
} 
 

 
.link1 { 
 
\t height: auto; 
 
\t width: 50%; 
 
\t color: rgba(255,255,255,1); 
 
\t margin-right: auto; 
 
\t margin-left: auto; 
 
\t background-color: rgba(204,204,204,1); 
 
} 
 

 
.link1 a { 
 
\t text-decoration: none; 
 
\t display: block; 
 
} 
 

 
.link1 a:hover { 
 
\t text-decoration: underline; 
 
\t background-color: rgba(255,0,0,1); \t 
 
} 
 

 
.link1 a:hover .dropdown { 
 
\t display: block; 
 
} 
 

 

 
.dropdown 
 

 
{ 
 
\t height: 25%; 
 
\t width: 50%; 
 
\t background-color: rgba(204,204,204,1); 
 
\t margin-right: auto; 
 
\t margin-left: auto; 
 
\t text-align: center; 
 
\t display: none; 
 
}

<div class="wrapper"> 
 

 
<div class="link1"> 
 
<a href="http://www.hotmail.com">This is text. Its in center</a> 
 
</div> 
 
<div class="dropdown">This is dropdown menu</div> 
 

 
</div>

Answer 1

你的CSS選擇.link1 a:hover .dropdown選擇與類dropdown，其必須是一個一個元件的內部在懸停狀態（a:hover），這是一個元件的內部帶有一個類的元件link1。

這不符合您的html標記。

得到它的工作，您可以在HTML改成這樣：

<div class="wrapper"> 
    <div class="link1"> 
      <a href="http://www.hotmail.com"> 
       This is text. Its in center 
       <div class="dropdown">This is dropdown menu</div> 
      </a> 
    </div> 
</div> 

希望它幫助。

Answer 2

Lexith是部分正確的，您需要在容器div中添加下拉菜單，然後您可以選擇徘徊鏈接的兄弟。

像這樣;

CSS -

.link1 a:hover + .dropdown { 
    display: block; 
} 

HTML -

<div class="link1"> 
    <a href="http://www.hotmail.com">This is text. Its in center</a> 
    <div class="dropdown">This is dropdown menu</div> 
</div> 

CSS更新 - 這樣的下拉菜單，它

.dropdown:hover, 
.link1 a:hover + .dropdown { 
    display: block; 
} 

徘徊這意味着它沒有任何時候保持開放的標籤造型。 View my code pen