Avoiding parent animations from affecting child elements using CSS

nav {
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: 8rem;
  border-bottom: 1px solid black;
}

.nav-list {
  display: flex;
  width: 100%;
}

.nav-list li {
  line-height: 8rem;
  position: relative;
}

.sub-menu li {
  color: #c40707;
  line-height: 7rem;
}

.nav-list a {
  display: block;
  color: black;
  padding: 0 1.5rem;
  font-size: 1.4rem;
  text-transform: uppercase;
  transition: color 300ms;
}

.nav-list a::after {
  content: "";
  position: absolute;
  background-color: #ff2a00;
  height: 3px;
  width: 0;
  left: 0;
  bottom: 15px;
  transition: 0s;
}

.nav-list a:hover::after {
  width: 100%;
}

.nav-list a:hover {
  color: #e3dedd;
}

.sub-menu a {
  color: #7e7978;
  font-size: 1.5rem;
  font-weight: 200;
}

.sub-menu {
  width: 20rem;
  display: block;
  position: absolute;
  visibility: hidden;
  z-index: 500;
  background-color: rgb(255, 255, 255);
  box-sizing: border-box;
  top: 2rem;
}

.nav-list li:hover>.sub-menu {
  top: 7.5rem;
  opacity: 1;
  visibility: visible;
}
<header>
    <ul class="nav-list">
        <li>
            <a href="%">Men</a>
            <ul class="sub-menu">
                <li><a href="#">shirts</a></li>
                <li><a href="#">Shorts</a></li>
                <li><a href="#">Tracks</a></li>
                <li><a href="#">Shoes</a></li>
            </ul>
        </li>
    </ul>
</header>

I am attempting to implement CSS for creating a dropdown menu. The code provided defines the structure of the navigation bar and menus. An interactive hover effect has been added to the nav bar elements. However, there is an issue where the hover effect meant for the nav bar is also affecting the submenu items. How can this be avoided?

htmlcss

Answer №1

In order to target only the top-level parent element "Men" with your CSS hover effect, you need to make your selectors more specific. Use the direct descendant selector ">" after your .nav-list selector to only affect the top level li a elements.

Here is where I made changes to your CSS:

.nav-list > li > a {
  display: block;
  color: black;
  padding: 0 1.5rem;
  font-size: 1.4rem;
  text-transform: uppercase;
  transition: color 300ms;
}

.nav-list > li > a::after {
  content: "";
  position: absolute;
  background-color: #ff2a00;
  height: 3px;
  width: 0;
  left: 0;
  bottom: 15px;
  transition: 0s;
}

.nav-list > li > a:hover::after {
  width: 100%;
}

This modification ensures that only the immediate children elements li and a are targeted by the CSS styles.

nav {
  display: inline-flex;
  align-items: center;
  width: 100%;
  height: 8rem;
  border-bottom: 1px solid black;
}

.nav-list {
  display: flex;
  width: 100%;
}

.nav-list li {
  line-height: 8rem;
  position: relative;
}

.sub-menu li {
  color: #c40707;
  line-height: 7rem;
}

.nav-list > li > a {
  display: block;
  color: black;
  padding: 0 1.5rem;
  font-size: 1.4rem;
  text-transform: uppercase;
  transition: color 300ms;
}

.nav-list > li > a::after {
  content: "";
  position: absolute;
  background-color: #ff2a00;
  height: 3px;
  width: 0;
  left: 0;
  bottom: 15px;
  transition: 0s;
}

.nav-list > li > a:hover::after {
  width: 100%;
}

.nav-list a:hover {
  color: #e3dedd;
}

.sub-menu a {
  color: #7e7978;
  font-size: 1.5rem;
  font-weight: 200;
}

.sub-menu {
  width: 20rem;
  display: block;
  position: absolute;
  visibility: hidden;
  z-index: 500;
  background-color: rgb(255, 255, 255);
  box-sizing: border-box;
  top: 2rem;
}

.nav-list li:hover > .sub-menu {
  top: 7.5rem;
  opacity: 1;
  visibility: visible;
}
<header>
    <ul class="nav-list">
        <li>
            <a href="%">Men</a>
            <ul class="sub-menu">
                <li><a href="#">shirts</a></li>
                <li><a href="#">Shorts</a></li>
                <li><a href="#">Tracks</a></li>
                <li><a href="#">Shoes</a></li>
            </ul>
        </li>
    </ul>
</header>

Answer №2

Add the class "main-menu-item"

<a class="main-menu-item" href="%">Men</a>

In the CSS Code, update the hover and after effect styling for "a" to the following:

.nav-list .main-menu-item::after {
        content: "";
        position: absolute;
        background-color: #ff2a00;
        height: 3px;
        width: 0;
        left: 0;
        bottom: 15px;
        transition: 0s;
    }

.nav-list .main-menu-item:hover {
        color: #e3dedd;
    }

See it in action below:

    nav {
        display: inline-flex;
        align-items: center;
        width: 100%;
        height: 8rem;
        border-bottom: 1px solid black;
    }

    .nav-list {
        display: flex;
        width: 100%;
    }

    .nav-list li {
        line-height: 8rem;
        position: relative;
    }

    .sub-menu li {
        color: #c40707;
        line-height: 7rem;
    }

    .nav-list a {
        display: block;
        color: black;
        padding: 0 1.5rem;
        font-size: 1.4rem;
        text-transform: uppercase;
        transition: color 300ms;
    }

    .nav-list .main-menu-item::after {
        content: "";
        position: absolute;
        background-color: #ff2a00;
        height: 3px;
        width: 0;
        left: 0;
        bottom: 15px;
        transition: 0s;
    }

    .nav-list a:hover::after {
        width: 100%;
    }

    .nav-list .main-menu-item:hover {
        color: #e3dedd;
    }

    .sub-menu a {
        color: #7e7978;
        font-size: 1.5rem;
        font-weight: 200;
    }

    .sub-menu {
        width: 20rem;
        display: block;
        position: absolute;
        visibility: hidden;
        z-index: 500;
        background-color: rgb(255, 255, 255);
        box-sizing: border-box;
        top: 2rem;
    }

    .nav-list li:hover>.sub-menu {
        top: 7.5rem;
        opacity: 1;
        visibility: visible;
    }
<header>
    <div class="container">
        <nav>
    </div>
    <ul class="nav-list">
        <li>
            <a class="main-menu-item" href="%">Men</a>
            <ul class="sub-menu">
                <li>
                    <a href="#">shirts</a>
                </li>
                <li>
                    <a href="#">Shorts</a>
                </li>
                <li>
                    <a href="#">Tracks</a>
                </li>
                <li>
                    <a href="#">Shoes</a>
                </li>
            </ul>
        </li>
    </ul>
</header>

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

CSS issue encountered: "Value of property is not valid"

When working with CSS, I encountered an error stating "Invalid Property Value" while inspecting the transform element of the Service section in the Wall Street theme. Could someone kindly assist me with the necessary steps to rectify this issue? https://i ...

csstransform

Changing the 'checked' attribute does not have any impact on how it appears in the browser

I am working on a button group where each button should light up when it is selected. The functionality is not fully working as expected; only one button should be active at a time. https://i.sstatic.net/oB9XG.png let stanceBar = ["long", "short", "out", ...

javascripthtml

Guide on navigating to a specific section on a different page using scrolling

Adding a link for a "read more" button is simple. Just include the href attribute like this: <a href="about.html#post2">readmore</a> In my index.html page, I have implemented Bootstrap 3 with scroll animations for navbar sections. When clicki ...

htmltwitter-bootstrap-3bootstrap-4smooth-scrolling

Opening the Instagram app in Instagram's built-in browser

<a href="instagram://user?username=someuser">Open Instagram</a> Works fine on Google Chrome on my Android phone. However, it does not work from Instagram's in-app browser. I keep getting a 'Page can't be loaded' error messa ...

phphtmlinstagraminappbrowser

The code functions correctly on JSfiddle, however it is not executing properly on my website

When I tried to implement the code from this jsfiddle link: http://jsfiddle.net/mppcb/1/ on my website (), it didn't work as expected: Here is the HTML code snippet: <form id="myform" novalidate="novalidate"> <input type="text" name="fi ...

javascriptjqueryhtml

Image missing aria-label attribute

I am facing an issue with getting the aria-label to display on my image. Despite checking my code, I cannot figure out why it is not working. Any ideas on what might be missing? Here is the code from my NextJS app: The svg in my public folder. <?xml v ...

htmlcssreactjsnext.js

revealing the excessive vertical space in the div upon clicking the link

Here is the structure: +-----------------------------------------------------------------------+ | | | heading {position: fixed;} | |________ ...

jqueryhtmlcss

Transitioning from a fixed position to absolute in CSS3

Sticky Logo Element In my project, I implemented a logo element that is positioned absolutely within the document. As the user scrolls, the logo sticks to the top of the window with a fixed position (you can view an example here: https://jsfiddle.net/swzb ...

javascripthtmlcss

Using a PHP for loop to manage a div control

Query: I am seeking a way to exert influence over the positioning of my dynamic divs. I want each div to be relative to the parent div. Challenge: The current code does not provide the flexibility to adjust the div positions based on the parent div. For i ...

phphtmlcss

Issues with Disabling the Browser's Back Button with jquery

I have been attempting to prevent the back button from functioning in a specific Browser, Microsoft Bing. Interestingly, my code works only if I click somewhere in the window first. If I don't click anywhere and try to go back directly, it still allow ...

javascripthtmljquery

What is the best way to align these boxes so they fit perfectly together?

check it out here code snippets <div id="container"> <div class="box">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna non augue porttitor scelerisque ac id diam. Mauris elit velit, lobortis sed interdum at, vestibu ...

htmlcss

Adding ids dynamically to href elements in Vue.js

As a newcomer, I am facing an issue with dynamically adding an id to my href tag. Below is the code snippet: <div class="col-md-6" v-for="Product in data"> <div class="panel panel-default" > <div class="panel-heading"> ...

htmlcssvue.jsbootstrap-4

Encountering an unforeseen change in the "buttonText" attribute

I've developed a simple Vue.js component for a button. When the button is clicked, it should display the text "I have been clicked." It does work as expected, but I'm also encountering an error that reads: 49:7 error Unexpected mutation of "but ...

javascripthtmlvue.jsbutton

Integrating Google RECAPTCHA 2 into a PHP form input whitelist: A step-by-step guide

After adding Google reCAPTCHA to my form for increased security, I encountered an error due to the reCAPTCHA not being whitelisted. It seems that HTML5 does not support assigning the name attribute to a div element, such as <div name="myName"></di ...

phphtmlformsrecaptcha

Adjust the size of a div element dynamically to maintain the aspect ratio of a background image while keeping the

Utilizing the slick slider from http://kenwheeler.github.io/slick/ to display images of varying sizes, including both portrait and landscape pictures. These images are displayed as background-image properties of the div. By default, the slider has a fixed ...

javascriptcssslideraspect-ratioslick.js

Ways to ensure a function is only triggered once using onmouseover

I'm fairly new to JavaScript and I've been attempting to create a function that only runs once. Here's the logo I've been trying to animate: <img src="img/logot2.png" id="logoutjs" onmouseover="move()" ...

javascripthtml

Creating code for both the PC and mobile website by utilizing the user agent

I need to customize the CSS for my website, and I have a specific question: If a user is accessing my web page via a computer, the CSS should be as follows: <link rel="stylesheet" href="/pc.css" type="text/css" media="all" /> However, if they are ...

javascripthtml

Consistently maintaining a uniform distance between icons and the border box is essential

I am working on a team overview for a company where data such as name, job title, and information are fetched from the database. Due to varying lengths of information, the icons are not aligning properly in one line. https://i.sstatic.net/cEmKj.png Does ...

htmlcsssass

The Bootstrap form input control is not updating its background and border color as expected

Recently, I decided to revamp the look of the input controls on my website. I made some changes in the code like so: //Updating bootstrap variables $input-bg: $background-color; $input-color: yellow; $input-border-color: $gray-500; $input-focus-border-colo ...

cssbootstrap-4sass

The iframe on my WordPress website is not displaying at its full size as intended

Is it possible to embed a link to a website in WordPress that is responsive to different devices, such as desktops and phones with varying screen sizes? On desktops, it looks fine, but on phones, it gets cut off and does not adjust accordingly. Using padd ...

javascripthtmlcsswordpressiframe