Duration for Bottom border using CSS-CodePudding

I'm creating navbar with submenu. The elements of the navbar have a bottom border that becomes visible when hovered on. Further, a submenu is also visible. Currently, the bottom border goes invisible when the cursor is moved to submenu. I want it to be visible as long as the submenu is open.

nav {
  display: inline-flex;
  width: 100%;
}

.nav-list {
  display: flex;
  width: 100%;
  margin-top: .7rem;
  /*Use this to change the postition of dropdown*/
  padding-left: 1.1rem;
  /*Use this to move the dropdown left and right*/
}

.nav-list li {
  position: relative;
}

.nav-list>li>a {
  color: black;
  display: block;
  font-size: 1rem;
  padding: 1.3rem 1rem;
  text-transform: uppercase;
}

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

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

.sub-menu {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  background-color: black;
  visibility: hidden;
  top: 3.89rem;
  /*adjust postion */
  left: -4rem;
  width: 82.5rem;
  height: 35rem;
  z-index: 5000;
}

.sub-menu a {
  position: relative;
  top: 2rem;
  color: white;
  font-size: 1.1rem;
  font-weight: 200;
  padding: 3rem 40px 0 40px;
}

.sub-menu a:hover {
  color: #7e7978;
}

<div  id="navbar">
  <nav>
    <ul >
      <li>
        <a href="">Men</a>
        <ul >
          <li><a href="#">shirts</a> </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>

CodePudding user response：

I have added the following code to the .nav-list li:hover .sub-menu block

.nav-list>li:hover .sub-menu {
      visibility: visible;
    }

This makes sure that the sub-menu is visible as long as the parent element is hovered.

And also added the following code to the .nav-list>li>a:hover:after


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

This makes sure that the bottom border is visible as long as the parent element is hovered.

 

   nav {
  display: inline-flex;
  width: 100%;
}

.nav-list {
  display: flex;
  width: 100%;
  margin-top: .7rem;
  /*Use this to change the postition of dropdown*/
  padding-left: 1.1rem;
  /*Use this to move the dropdown left and right*/
}

.nav-list li {
  position: relative;
}

.nav-list>li>a {
  color: black;
  display: block;
  font-size: 1rem;
  padding: 1.3rem 1rem;
  text-transform: uppercase;
}

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

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

.nav-list>li:hover .sub-menu {
  visibility: visible;
}

.sub-menu {
  display: flex;
  position: absolute;
  box-sizing: border-box;
  background-color: black;
  visibility: hidden;
  top: 3.89rem;
  /*adjust postion */
  left: -4rem;
  width: 82.5rem;
  height: 35rem;
  z-index: 5000;
}

.sub-menu a {
  position: relative;
  top: 2rem;
  color: white;
  font-size: 1.1rem;
  font-weight: 200;
  padding: 3rem 40px 0 40px;
}

.sub-menu a:hover {
  color: #7e7978;
}
.nav-list>li:hover .sub-menu {
  visibility: visible;
}
.nav-list>li:hover>a::after {
  width: 100%;
}

<div  id="navbar">
  <nav>
    <ul >
      <li>
        <a href="">Men</a>
        <ul >
          <li><a href="#">shirts</a> </li>
        </ul>
      </li>
    </ul>
  </nav>
</div>