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

I've finished a dropdown menu for a button i've created. Here is the demo

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

The only problem is in fact that the dropdown menu doesn't get visible when I hover my mouse over the button.

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

I've added display: block and display:none in the correct CSS i believe and i can't figure out what the problem is

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

2 个解决方案

#1

Wrapp all your code in a div tag, and add the hover to it

将所有代码包含在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>

You can use opacity:1 and display:block to show a hidden element, or only display none/block, you can animate the opacity after you change the display rule.

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

Css

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

jsfiddle DEMO

First to notice is that this trick only works when you hover a parent and the element that you want to make visible is a child of the hovered element, in your case you have the anchor tag as sibling of the list that you want to show, so you should place the dropdown menu inside your element, but as second thing to notice is that it won't work with all tags, i'm not quite sure why, but some inline elements won't work for this, even if you set its display property to block, i guess that maybe browsers won't allow this since is not semantically correct to place a submenu inside an anchor tag. Even though i said inline, i know it works with span tags, so its probably about the semantic.

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

As an advice, for menus and submenus use ul and li tags, gl

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

#2

Check this Demo CSSDesk

检查这个演示CSSDesk

Use display:none and display:block to solve this issue.

使用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;
}

#1