纯CSS悬停菜单

我正在尝试为导航栏创建一个基本的、最好是没有javascript的悬停下拉菜单，当它悬停在上面时它会出现，但当你从中滚动时它会消失。我已经尝试过了，但似乎不知道如何修复它

代码如下：

HTML:

<div tabindex="0" class="locations-menu" id="home-menu">
    <div class="arrow">
    </div>

    <ul class="locations-menu-content" id="locations-header">
        <br>
        <a class="button" href="location1.html">Location #1</a><br>
        <a class="button" href="location2.html">Location #2</a><br>         
        <a class="button" href="location3.html">Location #3</a><br>


</ul>
    </div>
</div>

.button {
    font-family:"Trebuchet MS";
    font-size:14px;
    text-decoration:none;
    color:#3D3D3D;
}

.arrow {
    top:140%;
    background-color:#648FBD;
    position:absolute;
    height:50%;
    width:30%;
    opacity:0;
    visibility:hidden;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.locations-menu {
    position: absolute;
    display: inline-block;
    height:50px;
    top:3%;
    left:30%;
}

.locations-menu:before {
    content: "Locations";
    font-family:"Trebuchet MS";
    font-size:24px;
}

.locations-menu:focus {
    pointer-events: none;
}

.locations-menu:hover .arrow {
    opacity: 1;
    transition: visibility 2s;
    visibility: visible;
    pointer-events: auto;
}

.locations-menu-content:hover .locations-menu-content {
    opacity: 1;
    visibility: visible;
    pointer-events:auto;
}

.locations-menu:hover .locations-menu-content {
    opacity: 1;
    transition: visibility 2s;
    visibility: visible;
    pointer-events: auto;
}

.locations-menu-content {
    background-color:#648FBD;
    top:125%;
    left:-15%;
    position:absolute;
    z-index: 1;
    width:200%;
    height:200%;
    text-decoration:none;
    opacity: 0;
    visibility: hidden;
    z-index:2;
}

如果有人愿意修复代码，或者至少告诉我出了什么问题，那就好了。也许有一个简单的解决办法，但我还是找不到

对于那些希望看到代码运行的人，这里是

---

谢谢。

一个快速解决方法是在创建气泡元素的元素（

。位置菜单内容

和

。箭头

）中添加一些负的

页边距顶部

：

。按钮{
字体系列：“投石机MS”；
字体大小：14px；
文字装饰：无；
颜色：#3d3d；
}
.阿罗{
最高：140%；
背景色：#648FBD；
位置：绝对位置；
身高：50%；
宽度：30%；
不透明度：0；
可见性：隐藏；
-ms变换：旋转（45度）；
-webkit变换：旋转（45度）；
变换：旋转（45度）；
利润上限：-40px；
}
.位置菜单{
位置：绝对位置；
显示：内联块；
高度：50px；
最高：3%；
左：30%；
}
.位置菜单：之前{
内容：“地点”；
字体系列：“投石机MS”；
字体大小：24px；
}
.位置菜单：焦点{
指针事件：无；
}
.位置菜单：悬停.箭头{
不透明度：1；
过渡：能见度2s；
能见度：可见；
指针事件：自动；
}
.位置菜单内容：悬停.位置菜单内容{
不透明度：1；
能见度：可见；
指针事件：自动；
}
.位置菜单：悬停.位置菜单内容{
不透明度：1；
过渡：能见度2s；
能见度：可见；
指针事件：自动；
}
.位置菜单内容{
背景色：#648FBD；
最高：125%；
左-15%；
位置：绝对位置；
z指数：1；
宽度：200%；
身高：200%；
文字装饰：无；
不透明度：0；
可见性：隐藏；
z指数：2；
利润上限：-24px；
}

您只需将内容包装在一个容器中，然后设置

高度：100%

。这样，悬停动作将占据整个高度，但内容将定位在您想要的位置

HTML

<div tabindex="0" class="locations-menu" id="home-menu">    
   <div class="wrapper">
      <div class="arrow"></div>
      <ul class="locations-menu-content" id="locations-header">
         <br/>
         <a class="button" href="location1.html">Location #1</a><br/>
         <a class="button" href="location2.html">Location #2</a><br/>           
         <a class="button" href="location3.html">Location #3</a><br/>           
      </ul>
   </div>
</div>

---

除了有任何方法使其与常规菜单选项卡保持相同的距离外，它工作得很干净。它的边距与单词位置重叠（至少在我的Google Chrome中）。请注意，这不是制作正确的列表菜单的方法。使用列表项

li

并将链接

a

放入其中。谢谢，它看起来很完美。我不知道谁投了反对票，但我对S.O.还是有点陌生，所以我还不能投反对票，哈。但是非常感谢。

.wrapper{
   height: 100%;  
}