Как сохранить родительское меню при наведении мыши на дочернее меню в выпадающем меню, используя html?

Question

- это код одной части, которая мне нужна, чтобы держать эффект наведения при переходе через подменю.

.container {
  max-width: 1000px;
  margin : 0 auto;
}

nav {
  background: #fff;
  box-shadow: 0 0 15px 0 rgba(0,0,0,10);
  font-family: 'Quicksand', sans-serif;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

nav li{
  display: inline-block;
}

nav a{
  color: #000;
  text-decoration: none;
  display: block;
  padding: 0.75em 1.75em;
}

nav li:hover{
  background: #fff;
}

nav li:hover a{
  color: #000;
}

.menu-main{
  height: 8%;
  vertical-align: middle;
}

.menu-sub{
  position: absolute;
  left: 0;
  background: #fff;
  width: 100%;
  display: none;
  color: #fff;
  padding: 2em;
}

nav li:hover .menu-sub{
  display: block;
}

.menu-sub li{
  display: block;
}

.menu-sub a{
  padding: 0;
  margin-bottom: 0.35em;
  font-size: 1em;
  font-family: 'Quicksand', sans-serif;
}

.menu-sub a:hover{
  font-weight: bold; 
}

.menu-category-men{
  margin: 1em 0 1em;
  color:#3498db;
  font-size: 1em;
  font-family: 'Quicksand', sans-serif;
}

.menu-col-1{
  float: left;
  width: 25%;
}

.menu_men
{
border-bottom: 4px solid white;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  background:transparent !important;
  font-family: 'Quicksand', sans-serif;
  font-weight: bold;
}

.menu_men:hover
{
  
  transition: ease 0.5s !important; 
  border-bottom: 4px solid #3498db;
}

<nav>
	<div class="container">
<ul class="menu-main">
				<li><a href="" class="menu_men">MEN</a>
					<div class="menu-sub">
						<div class="menu-col-1">
						<h3 class="menu-category-men">Topwear</h3>
						<ul>
						<li><a href="">T-shirts</a></li>
						<li><a href="">Casual Shirts</a></li>
						<li><a href="">Formal Shirts</a></li>
						<li><a href="">Sweatshirts</a></li>
						<li><a href="">Jackets</a></li>
						<li><hr style="width: 65%; float: left; opacity: 30%;"></li>
						</ul>
</div>
</div>
</li>
</ul>
</div>
</nav>

эффект наведения на категорию мужчин исчезает, когда я попадаю в подменю вкладки. я хочу, чтобы при наведении курсора на подменю категории «мужчины» я хотел, чтобы синие подчеркивания категории «мужчины» оставались включенными. пожалуйста, помогите мне с этим.

Answer 1

Поместить состояние :hover в li, а не в ссылку

li:hover .menu_men {
  transition: ease 0.5s !important;
  border-bottom: 4px solid #3498db;
}

.container {
  max-width: 1000px;
  margin: 0 auto;
}

nav {
  background: #fff;
  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 10);
  font-family: 'Quicksand', sans-serif;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  position: relative;
}

nav li {
  display: inline-block;
}

nav a {
  color: #000;
  text-decoration: none;
  display: block;
  padding: 0.75em 1.75em;
}

nav li:hover {
  background: #fff;
}

nav li:hover a {
  color: #000;
}

.menu-main {
  height: 8%;
  vertical-align: middle;
}

.menu-sub {
  position: absolute;
  left: 0;
  background: #fff;
  width: 100%;
  display: none;
  color: #fff;
  padding: 2em;
}

nav li:hover .menu-sub {
  display: block;
}

.menu-sub li {
  display: block;
}

.menu-sub a {
  padding: 0;
  margin-bottom: 0.35em;
  font-size: 1em;
  font-family: 'Quicksand', sans-serif;
}

.menu-sub a:hover {
  font-weight: bold;
}

.menu-category-men {
  margin: 1em 0 1em;
  color: #3498db;
  font-size: 1em;
  font-family: 'Quicksand', sans-serif;
}

.menu-col-1 {
  float: left;
  width: 25%;
}

.menu_men {
  border-bottom: 4px solid white;
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  background: transparent !important;
  font-family: 'Quicksand', sans-serif;
  font-weight: bold;
}

li:hover .menu_men {
  transition: ease 0.5s !important;
  border-bottom: 4px solid #3498db;
}

<nav>
  <div class="container">
    <ul class="menu-main">
      <li><a href="" class="menu_men">MEN</a>
        <div class="menu-sub">
          <div class="menu-col-1">
            <h3 class="menu-category-men">Topwear</h3>
            <ul>
              <li><a href="">T-shirts</a></li>
              <li><a href="">Casual Shirts</a></li>
              <li><a href="">Formal Shirts</a></li>
              <li><a href="">Sweatshirts</a></li>
              <li><a href="">Jackets</a></li>
              <li>
                <hr style="width: 65%; float: left; opacity: 30%;">
              </li>
            </ul>
          </div>
        </div>
      </li>
    </ul>
  </div>
</nav>

Answer 2

Добавьте этот код к вашему CSS. Должен сделать свое дело! :):

nav ul li:hover > a {
border-bottom: 4px solid #3498db;
background:#FFF !important;
}