Question

我正在尝试为导航栏创建一个基本，最好没有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>

CSS：

.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;
}

如果有人愿意修改代码或至少告诉我哪些错误会很好。可能有一个简单的解决方案，但我再次，似乎无法找到它。

对于那些喜欢看代码的人，这里是 fiddle。

谢谢。

Answer 1

一个快速解决方法是向创建气泡元素（margin-top和.locations-menu-content）的元素添加一些否定.arrow：

＆＃13;

.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);
  margin-top: -40px;
}
.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;
  margin-top: -24px;
}

＆＃13;

<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>

＆＃13;

Answer 2

您可以将内容封装在容器中并设置height: 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>

<强> CSS

.wrapper{
   height: 100%;  
}

FIDDLE

纯CSS悬停菜单

2 个答案: