I'm trying to make a submenu without javascript and it works, but as soon as I remove the cursor from the parent link, the submenu disappears. Can you please tell me what to change?
I tried to change the top: 0 and z-index: 1 for the .header__submenu, unfortunately nothing has changed
Here html:
<header class="header">
<div class="header__inner">
<a href="" class="logo logo_position_header">
<img src="images/logo.svg" alt="tines logo" class="logo__image" />
</a>
<div class="header__right">
<nav class="header__nav">
<ul class="header__list">
<li class="header__item">
<a href="#" class="header__link">Products</a>
</li>
<li class="header__item">
<a href="#" class="header__link">Use cases</a>
</li>
<li class="header__item">
<a href="#" class="header__link" id="header__link-resources" data-opened-menu="1">Resources</a>
<nav class="header__submenu" id="header__submenu-resources" data-opened="1">
<ul class="header__submenu-list">
<li class="header__submenu-item">
<a href="#" class="header__submenu-link">
Webinars
<p class="header__submenu-description">Get to know Tines and our use cases, live and on-demand.</p>
</a>
</li>
<li class="header__submenu-item">
<a href="#" class="header__submenu-link">
Blog
<p class="header__submenu-description">Read articles by team members, from company updates to tutorials.</p>
</a>
</li>
<li class="header__submenu-item">
<a href="#" class="header__submenu-link">
Prodcast
<p class="header__submenu-description">Listen to the latest episodes of our podcast, 'The Future of Security Operations.'</p>
</a>
</li>
<li class="header__submenu-item">
<a href="#" class="header__submenu-link">
Customers stories
<p class="header__submenu-description">Learn how the world’s best security teams automate their work.</p>
</a>
</li>
<li class="header__submenu-item">
<a href="#" class="header__submenu-link">
Story library
<p class="header__submenu-description">Discover helpful example Stories, connect them to your own tools and start customizing instantly.</p>
</a>
</li>
<li class="header__submenu-item">
<a href="#" class="header__submenu-link">
Video lessons
<p class="header__submenu-description">Learn the basics of Tines one byte-sized video at a time.</p>
</a>
</li>
<li class="header__submenu-item">
<a href="#" class="header__submenu-link">
Docs
<p class="header__submenu-description">Get to know the features and concepts of Tines, in detail.</p>
</a>
</li>
<li class="header__submenu-item">
<a href="#" class="header__submenu-link">
API
<p class="header__submenu-description">Browse the capabilities and endpoints of our comprehensive REST API.</p>
</a>
</li>
</ul>
</nav>
</li>
CSS:
.header__link{
text-decoration: none;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 22px;
color: var(--color-dark);
transition: color .2s linear;
}
#header__link-resources{
position: relative;
}
.header__link:hover{
color: var(--color-main);
}
#header__link-resources:hover ~ #header__submenu-resources{
opacity: 1;
visibility: visible;
display: block;
}
#header__link-company:hover ~ #header__submenu-company{
opacity: 1;
visibility: visible;
display: block;
}
.header__submenu{
position: absolute;
right: 0;
top: 60px;
width: 100%;
visibility: hidden;
opacity: 0;
z-index: -1;
transition: all .1s linear;
-webkit-box-shadow: 0px 27px 25px -25px rgba(34, 60, 80, 0.2);
-moz-box-shadow: 0px 27px 25px -25px rgba(34, 60, 80, 0.2);
box-shadow: 0px 27px 25px -25px rgba(34, 60, 80, 0.2);
}
.header__submenu-list{
margin: 0;
padding: 40px 0;
list-style: none;
display: grid;
grid-template-columns: repeat(4, 1fr);
row-gap: 30px;
background-color: var(--color-light);
width: auto;
border-radius: 0 0 28px 28px;
}
.header__submenu-item{
padding: 0 20px 0 20px;
}
.header__submenu-description{
font-size: 14px;
font-weight: 500;
line-height: 1.25;
opacity: .6;
transition: opacity .1s;
margin: 10px 0 0 0;
}
Here's a link to the codepen for a example - https://codepen.io/Flain/pen/PoRPQVa
This is because you are displaying menu on hover of anchor and after mouse pointer leaves anchor the menu hides.Hover workes untill your mouse leaves the target area. you can fix this by following steps
padding: 10px 0; on anchor, then the anchor will touch the top of navigation giving extra space so that menu does not hide.learn about hover here