Why isn't my CSS recognizing the hover attribute?
Here is my code:
I would like the class "mega" to appear when hovering over the li tag.
<nav className="mobile-hide">
<ul className="flex-item second-links">
<li>
<Link href="#" className="has-child">
Women
<div className="icon-small">
<i className="ri-arrow-down-s-line"></i>
</div>
</Link>
<div className="mega">
Here is the CSS:
nav .mega {
display: none;
position: absolute;
width: var(--percent100);
height: auto;
top: auto;
left: 0;
right: 0;
padding: 2.5em;
line-height: 2em;
background-color: var(--light-bg-color);
box-shadow: rgb(0 0 0 / 20%) 0 30px 20px -30px;
z-index: 100;
}
nav li.has-child:hover .mega {
display: block;
}