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 >
<div >
<a href="" >
<img src="images/logo.svg" alt="tines logo" />
</a>
<div >
<nav >
<ul >
<li >
<a href="#" >Products</a>
</li>
<li >
<a href="#" >Use cases</a>
</li>
<li >
<a href="#" id="header__link-resources" data-opened-menu="1">Resources</a>
<nav id="header__submenu-resources" data-opened="1">
<ul >
<li >
<a href="#" >
Webinars
<p >Get to know Tines and our use cases, live and on-demand.</p>
</a>
</li>
<li >
<a href="#" >
Blog
<p >Read articles by team members, from company updates to tutorials.</p>
</a>
</li>
<li >
<a href="#" >
Prodcast
<p >Listen to the latest episodes of our podcast, 'The Future of Security Operations.'</p>
</a>
</li>
<li >
<a href="#" >
Customers stories
<p >Learn how the world’s best security teams automate their work.</p>
</a>
</li>
<li >
<a href="#" >
Story library
<p >Discover helpful example Stories, connect them to your own tools and start customizing instantly.</p>
</a>
</li>
<li >
<a href="#" >
Video lessons
<p >Learn the basics of Tines one byte-sized video at a time.</p>
</a>
</li>
<li >
<a href="#" >
Docs
<p >Get to know the features and concepts of Tines, in detail.</p>
</a>
</li>
<li >
<a href="#" >
API
<p >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
CodePudding user response：
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
- display menu on hover of li because mega menu is inside it.
- add some
padding: 10px 0;on anchor, then the anchor will touch the top of navigation giving extra space so that menu does not hide. - I also changed the z-index on menu and added pointer-event check that also
learn about hover here
CodePudding user response：
add some padding: 36px 0; on anchor