Submenu items displaying when they don't need to

user_3984332 0
Viewed 80

I'm trying to implement a navigation menu with a dropdown for my WordPress theme without using plugins or Bootstrap. It's working, but for some reason, that I can't understand, the submenus are displaying even when I hover the mouse below the ul.

Here's my Codepen: https://codepen.io/marceloquinze/pen/PoOexxw

So, for example, if you place the mouse below the pseudo-element in the Blog item, the About subitem will display. Of course, I want it to display only when I hover the mouse over the Blog item.

I know I can solve the problem if I set the display property as none for the submenu and then to display block. Something like this:

.main-menu ul.sub-menu{
    position: absolute;
    padding-left: 0;
    background-color: #000000;
    z-index: 1;
    text-align: left;
    opacity: 0;
    display: none; // Like this
    transition: all .350s;
}
.main-menu ul .menu-item-has-children:hover > ul,
.main-menu ul .menu-item-has-children:focus + ul{
    opacity: 1;
    display: block; // And this
}

But then I would miss the opacity transition effect. Can you guys please help me?

.main-menu {
  height: 55px;
  display: flex;
  justify-content: center;
}

.main-menu ul {
  margin: 0;
  padding-left: 0;
}

.main-menu ul li {
  display: inline-block;
  line-height: 55px;
  position: relative;
}

.main-menu ul li a {
  color: #000000;
  padding: 0 30px;
  text-decoration: none;
  display: block;
}

.main-menu li.menu-item-has-children::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc( 50% - 6px);
  width: 0px;
  height: 0px;
  border-top: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #000000;
  border-left: 6px solid transparent;
}

.main-menu ul.sub-menu {
  position: absolute;
  padding-left: 0;
  background-color: #000000;
  z-index: 1;
  text-align: left;
  opacity: 0;
  display: none;
  transition: all .350s;
}


/* .main-menu ul.sub-menu:hover{
  opacity: 1;
} */

.main-menu ul .menu-item-has-children:hover>ul,
.main-menu ul .menu-item-has-children:focus+ul {
  opacity: 1;
  display: block
}

.main-menu ul.sub-menu li {
  width: max-content;
}

.main-menu ul.sub-menu a {
  color: #FFFFFF;
}
<nav class="main-menu">
  <div class="menu-main-menu-container">
    <ul id="menu-main-menu" class="menu">
      <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-15 current_page_item menu-item-65"><a href="http://wp-devs.local/" aria-current="page">Home</a></li>
      <li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-66"><a href="http://wp-devs.local/blog/">Blog</a>
        <ul class="sub-menu">
          <li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67"><a href="http://wp-devs.local/about/">About</a></li>
        </ul>
      </li>
      <li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-68"><a href="http://wp-devs.local/contact/">Contact</a>
        <ul class="sub-menu">
          <li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a href="http://wp-devs.local/landing-page/">Landing Page</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

flexbox css html
1 Answers

Remove padding on .main-menu ul li a. Essentially what the left & right padding is doing on the a is extending the container of the li#menu-item-66. Hence, the extended range on the :hover. Instead, just flex the parent ul and use gap to space them.

.main-menu {
  height: 55px;
  display: flex;
  justify-content: center;
}

.main-menu ul {
  margin: 0;
  padding-left: 0;
  display: flex;
  gap: 40px;
}

.main-menu ul li {
  display: inline-block;
  line-height: 45px;
  position: relative;
}

.main-menu ul li a {
  color: #000000;
  text-decoration: none;
  display: block;
}

.main-menu li.menu-item-has-children::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc( 50% - 6px);
  width: 0px;
  height: 0px;
  border-top: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #000000;
  border-left: 6px solid transparent;
}

.main-menu ul.sub-menu {
  position: absolute;
  padding-left: 0;
  background-color: #000000;
  z-index: 1;
  text-align: left;
  opacity: 0;
  display: none;
  transition: all .350s;
}


/* .main-menu ul.sub-menu:hover{
  opacity: 1;
} */

.main-menu ul .menu-item-has-children:hover>ul,
.main-menu ul .menu-item-has-children:focus+ul {
  opacity: 1;
  display: block
}

.main-menu ul.sub-menu li {
  width: max-content;
}

.main-menu ul.sub-menu a {
  color: #FFFFFF;
}
<nav class="main-menu">
  <div class="menu-main-menu-container">
    <ul id="menu-main-menu" class="menu">
      <li id="menu-item-65" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-home current-menu-item page_item page-item-15 current_page_item menu-item-65"><a href="http://wp-devs.local/" aria-current="page">Home</a></li>
      <li id="menu-item-66" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-66"><a href="http://wp-devs.local/blog/">Blog</a>
        <ul class="sub-menu">
          <li id="menu-item-67" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-67"><a href="http://wp-devs.local/about/">About</a></li>
        </ul>
      </li>
      <li id="menu-item-68" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-68"><a href="http://wp-devs.local/contact/">Contact</a>
        <ul class="sub-menu">
          <li id="menu-item-84" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-84"><a href="http://wp-devs.local/landing-page/">Landing Page</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

user_164963570
Related