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>

我试图使用CSS创建一个下拉菜单。我创建了一个导航栏与某些元素中提到的代码。我应用了悬停效果的导航栏。我创建了一个下拉菜单使用.nav-list li: hover > .sub-menu作为命令。然而，悬停效果，我的导航栏正在应用到子菜单了。如何防止这种情况发生？