悬停后保持下拉菜单打开（CSS）

Question

我创建了一个水平菜单，当您悬停一个项目时，会出现一个下拉菜单。这很好。但是，当您离开菜单项时（使用下拉菜单），下拉菜单消失。我知道这是因为你不再徘徊它，但我该如何解决这个问题？注意：我不想直接在它下面的下拉菜单中，我希望菜单项和下拉菜单之间有一个合理的差距（就像我目前所做的那样）。谢谢。

HTML

<header id="header"> 
    <div class="container"> 
     <a href="#top-anchor"><div id="logo"></div></a> 
     <nav class="header-menu"> 
      <a href="index.html" class="header-menu-item">ABOUT</a> 
       <div class="about-dropdown"> 
        <a href="index.html#core-services-anchor">CORE SERVICES</a> 
        <a href="index.html#atandl-anchor">AT&amp;L</a> 
        <a href="index.html#hseq-anchor">HSEQ</a> 
        <a href="index.html#clients-anchor">CLIENTS</a> 
        <a href="index.html#contact-anchor">CONTACT</a> 
       </div> 
      <a href="services.html" class="header-menu-item">SERVICES</a> 
      <a href="facilities.html" class="header-menu-item">FACILITIES</a> 
      <a href="#map-anchor" class="header-menu-item">CONTACT</a> 
     </nav> 
     <div id="hamburger"></div> 
     <!--<div id="box-shadow-menu"></div>--> 
    </div> 
</header> 

CSS

#header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100px; 
    user-select: none; 
    display: block; 
    transition: all 0.8s; 
    line-height: 100px; 
    z-index: 1000; 
    transform: translateX(0); 
    backface-visibility: hidden; 
    margin: 0; 
} 

header .container { 
    width: 1440px; 
    height: 100px; 
    border-bottom: 0.75px solid rgba(255,255,255,0.1); 
} 

#logo { 
    width: 55px; 
    height: 55px; 
    float: left; 
    margin-top: 27px; 
    background-image: url(../images/logo_white.png); 
    background-size: cover; 
} 

nav.header-menu { 
    float: right; 
    height: 96px; 
    vertical-align: middle; 
    padding-top: 1px; 
} 

.header-menu-item { 
    font-family: 'Montserrat', sans-serif; 
    font-size: 11px; 
    font-weight: 800; 
    margin-left: 20px; 
    text-decoration: none; 
    color: #ffffff; 
    line-height: 96px; 
    letter-spacing: 0.5px; 
    transition: 0.55s; 
} 

.toggle { 
    opacity: 0.3; 
} 

.current { 
    border-bottom: 2px solid #fff; 
    padding-bottom: 40px; 
} 

.about-dropdown { 
    position: absolute; 
    background-color: #fff; 
    min-width: 160px; 
    box-shadow: 0 0 4px 3px rgba(0,0,0,0.1); 
    z-index: 3000; 
    margin-top: 35px; 
    margin-left: -35px; 
    border-radius: 3px; 
    display: none; 
    transition: 0.8s; 
} 

.about-dropdown a { 
    display: block; 
    text-decoration: none; 
    padding: 0px 28px; 
    font-family: 'Montserrat', sans-serif; 
    font-size: 11px; 
    font-weight: 800; 
    margin: 0; 
    line-height: 50px; 
    border-bottom: 1px solid rgba(0,0,0,0.1); 
} 

.header-menu-item:hover + .about-dropdown { 
    display: block; 
} 

Answer 1

在'a'标签上，悬停时为其添加高度或填充底部。您的'a'标签可能需要绝对定位，以便其高度不会影响标头的高度。

喜欢的东西下面

.about-dropdown a:hover { 
    padding-bottom: 30px; /*height dependent on the gap you want to fill*/ 
    position: absolute; 
} 

Answer 2

不幸的是，我不能让你的榜样工作。我确实为您的问题创建了一个仅适用于CSS的解决方案demo。

它允许用户通过悬停菜单项触发子菜单。然后他们可以通过悬停子菜单来保持子菜单可见。当他们的光标离开子菜单时，子菜单会在指定的延迟后隐藏，我在演示中选择了1秒。如果用户在此延迟内再次将子菜单悬停，则子菜单不会隐藏。这样用户不仅可以将光标从菜单项移动到子菜单，还可以使用户在用户不小心将光标移动到子菜单的左侧或右侧时不会立即隐藏子菜单。

.trigger { 
 
    box-sizing: border-box; 
 
    position: relative; 
 
    width: 120px; 
 
    margin: 0 0 50px; 
 
    padding: 10px; 
 
    background: #bada55; 
 
    text-align: center; 
 
} 
 

 
.sub { 
 
    box-sizing: border-box; 
 
    position: absolute; 
 
    top: 100px; 
 
    left: 0; 
 
    width: 120px; 
 

 
    background: #4863a0; 
 
    color: #fff; 
 
    text-align: left; 
 
    
 
    /* hide element for now */ 
 
    max-height: 0; overflow: hidden; 
 
    opacity: 0; 
 
    /* make submenu not hoverable when opacity transition finished, 
 
    * do this instantaneously */ 
 
    transition: max-height 0s 1.5s, 
 
       /* hide the submenu after 1 second, in 400ms */ 
 
       opacity .4s 1s; 
 
    
 
    /* prevent users from showing submenu when hovering hidden element */ 
 
    pointer-events: none; 
 
} 
 

 
/* sub elements can be hovered */ 
 
.sub > * { 
 
    pointer-events: auto; 
 
} 
 

 
/* show submenu when trigger or menu itself is hovered */ 
 
.sub:hover, 
 
.trigger:hover .sub { 
 
    max-height: 500px; 
 
    opacity: 1; 
 
    transition-delay: 0s; 
 
} 
 

 
/* give items some spacing */ 
 
.item:not(:last-child) { 
 
    padding: 10px 10px 5px; 
 
} 
 
.item:last-child { 
 
    padding: 10px; 
 
}

<div class="trigger">HOVER ME 
 
    <div class="sub"> 
 
    <div class="item">Item 1</div> 
 
    <div class="item">Item 2</div> 
 
    <div class="item">Item 3</div> 
 
    <div class="item">Item 4</div> 
 
    </div> 
 
</div>

的想法是（AB）使用CSS transitions。我们完全隐藏子菜单并设置延迟的转换。然后，当盘旋时，我们将延迟设置为零。这将做什么是立即显示子菜单，但只有在延迟后才能隐藏它。这类作品，但现在当用户悬停隐藏的元素时，可以显示子菜单。为了防止这种情况，我们使子菜单没有高度（max-height: 0）并隐藏其子元素（overflow: hidden）。浏览器现在仍然可以决定触发悬停元素，所以我们确保他们不要设置pointer-events: none。所有这些也应该推迟，因此max-height的过渡。最后，通过设置pointer-events: auto中的元素，我们可以确保子菜单实际上可以被徘徊。不幸的是，它不可能过渡到max-height: none，所以我们指定了一些非常大的值，我在演示中使用了500px。