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