html - 将鼠标悬停在按钮上时，下拉菜单不可见

Question

我已经为我创建的按钮完成了下拉菜单。这是 demo

事实上，唯一的问题是当我将鼠标悬停在按钮上时下拉菜单不可见。

我相信我已经在正确的 CSS 中添加了 display:block 和 display:none 但我无法弄清楚问题是什么

Answer 1

将所有代码包裹在一个 div 标签中，并将悬停添加到其中

<div class="language-icon-wrapper">    
    <a class="language-icon" href="#" alt="choose-your-language">Language</a> 
    <div class="arrow-up"></div>
    <div class="arrow-down"></div>

    <div class="language-dropdown">
        <!--- your list here -->
    </div>
</div>  

您可以使用 opacity:1 和 display:block 来显示隐藏元素，或者只显示 none/block，您可以在更改显示后设置不透明度动画规则。

CSS

.language-icon-wrapper:hover .language-dropdown {
  opacity: 1;
  display:block;
}

jsfiddle DEMO

首先要注意的是，此技巧仅在您悬停父元素并且要使其可见的元素是悬停元素的子元素时才有效，在您的情况下，您将 anchor 标记作为所需列表的兄弟元素显示，所以你应该把下拉菜单放在你的元素中，但是第二件要注意的是它不适用于所有标签，我不太清楚为什么，但是一些内联元素不适用于这个，即使您将其显示属性设置为阻止，我猜浏览器也可能不允许这样做，因为在 anchor 标记内放置子菜单在语义上是不正确的。尽管我说的是内联，但我知道它适用于 span 标签，所以它可能与语义有关。

作为一个建议，对于菜单和子菜单使用 ul 和 li 标签，gl