html - 将鼠标悬停在 span 上以显示下拉列表

Question

当鼠标悬停在文本上时，我试图显示一个下拉列表。目前我的 html 如下:

<div class="col-sm-12">
    <span style="font-size:26px">nature : <strong class="link">DROPDOWN</strong>
        <ul class="dlist">
            <li><a href="#">A</a></li>
            <li><a href="#">b</a></li>
            <li><a href="#">C</a></li>
            <li><a href="#">D</a></li>
            <li><a href="#">E</a></li>
            <li><a href="#">F</a></li>
        </ul>
    </span>
</div>

目前我的 CSS 看起来像这样:

.link:hover{
      color:green;
 }

我有点卡在这之后要采取什么步骤来显示下拉列表。

Answer 1

这是 adjacent sibling selector 的工作:

CSS

.dlist {
    display: none;
}
.link:hover + .dlist {
    display: block;
}