css中的下拉菜单在悬停时消失

Question

我的 css 一直有问题 - 尝试多次修改代码但仍然卡住。在我粘贴所有 CSS（有很多）之前，也许有人知道下面的 GIF 可能是什么问题。

基本上，当您将鼠标悬停在语言上时，菜单就会打开。当您向下移动到法语/俄语时，下拉菜单会消失。

我感觉它与将鼠标悬停在下面的图片上有关。

非常感谢。

已编辑

刚刚在这里找到答案：Can't get CSS drop down nav to go over content

我必须将导航的 z-index 设置为 9999 才能将其置于最高优先级。

非常感谢您的 cmets 和回答。

~Aivoric

Answer 1

试试这个 - JSFiddle

HTML

<div class="language-choice">
  <a href="#">ENGLISH <span class="red active"></span></a>
  <a href="#">GERMAN <span class="red"></span></a>
  <a href="#">FRENCH <span class="red"></span></a>
  <a href="#">RUSSIAN <span class="red"></span></a>
</div>

CSS

.language-choice{
    -webkit-border-radius: 10px;
    -moz-border-radius:  10px;
    border-radius:  10px;
    height: 40px;
    width: 200px;
    border: green solid 2px;
    background-color: #fff;
    overflow: hidden;
}
.language-choice:hover{
    height: 160px;
}
.language-choice a{
    display: block;
    padding: 10px;
    text-decoration: none;
    color: green;
}
.language-choice a:hover{
    text-decoration: underline;
}
.language-choice a .red{
    width: 16px;
    height: 16px;
    float: right;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    border: red solid 2px;
}
.language-choice a:hover .red, .language-choice a .active{
    background-color: red;
}