Хранить раскрывающееся меню открыто после наведения (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

К сожалению, я не мог получить свой пример работы. Я создал небольшое demo решение только для CSS.

Это позволяет пользователям запускать подменю путем наведения указателя на пункт меню. Затем они могут удерживать подменю видимым, нависая над ним. Когда их курсор покидает подменю, подменю будет скрыто после определенной задержки, я выбрал 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 в демо.