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结构而不是那个箭头。您可以简单地将下拉元素和下拉开启元素（在您的示例中＃34; Desafios＆＃34;链接）放在彼此旁边，然后将悬停事件附加到其父级。

看一下这个例子：

.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元素。

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

1 个答案: