why hover attribute not working on NextJS

Why doesn’t my css recognize the hover attribute?

this is my code

I want when hovering on the li thi class mega tag to appear

<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">

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;
  }

>Solution :

you can try

html

<li className="list-child">
                    <Link href="#" className="has-child">
                      Women
                      <div className="icon-small">
                        <i className="ri-arrow-down-s-line"></i>
                      </div>
                    </Link>

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 .list-child:hover .mega {
    display: block;
  }