Question

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

唯一的问题是，当我将鼠标悬停在按钮上时，下拉菜单不会显示。

我已将display: block和display:none添加到我认为正确的CSS中，但我无法弄清问题是什么

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来显示隐藏元素，或者只显示无/块，您可以在更改显示规则后为不透明度设置动画。

<强>的CSS

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

jsfiddle DEMO

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

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

Answer 2

选中此Demo CSSDesk

使用display:none和display:block来解决此问题。

CSS

.language-dropdown {
  display: none;
  background: #f5f5f5;
  width: auto;
  position: relative;
  border: 1px solid #ddd;
}
.language-icon-wrapper:hover .language-dropdown {
  display:block;
}

将鼠标悬停在按钮上时，下拉菜单不会显示

2 个答案:

CSS