What could be the reason for the hover attribute not functioning properly in NextJS

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

Answer №1

if you're interested, give this a shot

try out some html code

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

consider checking out this css snippet

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Adding Jquery content to HTML templates using Jinja2: A Simple Guide

Looking at my HTML code Base.html <title> {% block title %}{% endblock %} </title> </head> <body> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <div class="collapse na ...

Adjust the height of a <div> element to fit the remaining space in the viewport or window automatically

I am working with the following HTML code: <html> <BODY> <DIV ID="holder"> <DIV ID="head_area">HEAD CONTENT GOES HERE....</DIV> <DIV ID="main_area">BODY CONTENT GOES HERE</DIV> ...

Tips for relocating a CSS button

I have designed two buttons using css and I am looking to align them below the title "forecast customer activity". Due to extensive styling in css, the code might appear lengthy. Requesting assistance with a solution after reviewing the following code snip ...

What is the best way to eliminate the white margin that is showing up on the right side of my website?

Here's a question that has been bugging me recently... So, I've been working on creating my own version of an Airbnb website called 'tombnb' for a few weeks now. Everything was going smoothly until I encountered a persistent issue. Th ...

Suggestions for preventing the highlighting of the space between buttons on a webpage

html: <button id='automoney' onclick='minusTen()'></button> <button id='automoney2' onclick='minusHundred()'></button> <button id='automoney3' onclick='minusFiveHundred()& ...

Tips for validating multiple inputs of the same type with identical names in JavaScript

I have limited experience with Javascript and am facing an issue with a HTML form that contains multiple input types with the same names occurring more than once. My goal is to validate the form before inserting the data into the database. I have managed t ...

I am having trouble with my scroll reveal effects on JavaScript, how can I troubleshoot and fix the issue?

I'm currently making updates to my portfolio website, but for some reason, the scroll reveal animation has suddenly stopped working. I made a few edits and now it seems to be broken. /*===== SCROLL REVEAL ANIMATION =====*/ const sr = ScrollReveal({ ...

Pressing the button in the navigation bar results in an expansion of the navbar

Can someone help me figure out why my navbar's height is different from the example on this Bootstrap navigation bar snippet? Here's the code I used: https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_navbar_form&stacked=h I copi ...

Determining the margin-left value of a centrally positioned table

I have a table with variable columns, meaning the columns of the table are dynamic. The number of columns will keep changing, causing the table to be centralized and the margin-left value to adjust accordingly. Now, I need to calculate the margin-left val ...

jquery to create a fading effect for individual list items

I have a group of items listed, and I would like them to smoothly fade out while the next one fades in seamlessly. Below is the code I've been working on: document.ready(function(){ var list_slideshow = $("#site_slideshow_inner_text"); ...

Using two different colors in text with CSS

Is it possible to have text in two different colors like this: https://i.stack.imgur.com/R40W1.png In terms of HTML, I tried looking it up but found answers related to:- https://i.stack.imgur.com/GRAfI.png ...

Struggle with Loading Custom Templates in Text Editor (TinyMCE) using Angular Resolver

My goal is to incorporate dynamic templates into my tinyMCE setup before it loads, allowing users to save and use their own templates within the editor. I have attempted to achieve this by using a resolver, but encountered issues with the editor not loadin ...

How can I apply max-width and max-height to a background image?

It seems like a simple task. I am currently transitioning my layout to become more fluid by working on creating scalable images. While using the img tag and setting max-width to 100% is effective, I am considering using a div with the image set as its bac ...

Always take the lead with the first image in navigation

Looking to add an image to your website navigation? Want the image to appear at the beginning of the navigation bar, before Link 1? Here's a bit of CSS code for you: <div class="topnav"> <img src="https://cdn.mos.cms.futurecdn ...

Exploring the World of React Variables

Recently, I've been diving into the world of React and encountered some challenges while styling my components. Personally, I find it more organized to style within the same JavaScript file instead of having a separate one. However, I'm curious a ...

Tips for concealing labels until the submit button is activated

I am currently handling a project involving a Spring Controller and JSP. Within a JSP page, I have included a button labeled Process. Upon clicking this button, two radio buttons are displayed below it along with a Submit button. After tapping the Submit ...

Creating a vertical scrollbar with CSS flexbox for columns set at 100% height in a row for FF, IE, and

I am currently working on an HTML application that needs to fit perfectly within a designated space without causing any page level scrollbars. I have utilized flexbox styles extensively to achieve this, but unfortunately, I am facing compatibility issues w ...

Is it possible to retrieve JSON data and display only the entries with positive values in an HTML

I am working on a project that involves fetching JSON API data and displaying it in an HTML table, but only for values above 10. Below is the code snippet along with my JavaScript. I specifically want to exclude negative values and only display positive v ...

Ways to ensure that a URL is distinct once a link has been clicked

On my website list.php, I have a code snippet that changes the video in an iframe when a link is clicked. However, the URL remains as list.php instead of changing to something like list.php/Anohana10. How can I update the URL to reflect the selected video? ...

The content of my menu is concealed within a DIV. It may remain hidden or malfunction

I am in the process of creating master pages. In one of the master pages, I have implemented a dropdown menu using jQuery and CSS. While it works perfectly fine on some pages, it seems to be hidden on others that contain a div element. This is because the ...