下拉菜单由于箭头而消失得太快

Question

我使用下拉菜单创建了一个导航，其上方有一个箭头。

箭头看起来是我想要的方式，我需要将菜单移动到底部。这使我的指针失去了“悬停”，菜单被关闭。

有人知道这个解决方案吗？如果我删除箭头，一切都会正常工作，但我真的很喜欢它现在的样子！

菜单CSS：

nav ul { 
    margin: 0; padding: 0; 
    list-style: none; 
    width: 100%; 
} 

nav li { 
    float: left; 
    list-style-type: none; 
    padding-right: 60px; 
    position: relative; 
} 

nav ul li { 
    position: relative; 
    display: block; 
} 

nav li ul { 
    position: absolute; 
    display: none; 
    margin-top: 15px; 
    opacity: 0; 
    -webkit-transiton: opacity 2s; 
    -moz-transition: opacity 2; 
    -ms-transition: opacity 2s; 
    -o-transition: opacity 2s; 
    -transition: opacity 2s; 
} 

nav li ul li { 
    padding: 15px; 
    width: 100%; 
} 

nav li:hover ul { 
    display: block; 
    background: #001a33; 
    padding: 5px; 
    border-radius: 2px; 
    opacity: 1; 
    visibility: visible; 
    z-index: 50; 
} 

箭头：

.arrow-up { 
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent; 
    border-right: 10px solid transparent; 
    border-bottom: 10px solid #001a33; 
    position: absolute; 
    top: -10px; 
    margin-left: 15px; 
    -webkit-transiton: opacity 2s; 
    -moz-transition: opacity 2; 
    -ms-transition: opacity 2s; 
    -o-transition: opacity 2s; 
    -transition: opacity 2s; 
} 

和HTML：

<ul id="nav"> 
       <li><a href="index.php">Início</a></li> 
       . . . 
       <li><a href="#">Desafios</a> 
       <ul> <div class="arrow-up"></div> 
        <li><a href="repeticao.php">Repetição</a></li> 
       <li><a href="desafio-imagem.php">Imagem</a></li> 
       </ul> 
       </li> 

      </ul> 

提前感谢！

Answer 1

问题是你的HTML结构，而不是那个箭头。 您可以简单地将下拉元素和下拉开启器元素（在您的示例“Desafios”链接中）放在一起，然后将悬停事件附加到其父项。

这个例子看看：

.menu {position: relative;} 
.open-it {background: none; border: 1px solid gray; padding: 5px;} 
.drop-down-list { 
    display: none; 
    position: relative; top: 100%; left: 0; padding: 5px; background-color: white; border: 1px solid gray; list-style: none; 
} 
.menu:hover > .drop-down-list {display: block !important;} 

<div class="menu"> 
    <button class="open-it">Open it</button> 
    <ul class="drop-down-list"> 
    <li><a href="">link</a></li> 
    <li><a href="">link</a></li> 
    <li><a href="">link</a></li> 
    </ul> 
</div> 

https://jsfiddle.net/2wwtfvey/1/

的窍门是位置下拉元素相对所以家长可以识别它的孩子。最后添加一个箭头并将其绝对定位到.open-it元素。