Prevent parent animation to child in CSS

Question

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>

Im trying to create a dropdown using CSS. I created a nav bar with certain elements that are mentioned in the code. I applied a hover effect to the nav bar. I created a dropdown using .nav-list li: hover > .sub-menu as the command. However, the hover effect I had for the nav bar is being applied to the sub menu too. How to prevent this from happening?

Answer 1

The problem is that you need to be more specific in your CSS selectors. Since you only want the hover to affect the "Men" top level parent element, you need to use the direct descendent > selector after your .nav-list selector - since you only want the top level li a.

I changed your CSS in this part:

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

That ensures that only the top level direct children elements li and a are selected.

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, change your hover and after effect from "a" to this:

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

Here is the running example:

    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>