CODEWITHSUNDEEP
htmlcss
Yahya Hussein
Yahya Hussein

Reputation: 9101

Force submenu display when only hovering on parent menu item

I have a menu with submenus included.

#menu-navigation>li:hover:before,
#menu-navigation>li:hover:after,
#menu-navigation>li.active:before,
#menu-navigation>li.active:after {
  opacity: 1;
  filter: alpha(opacity=100);
}

.menu ul li ul {
  width: 230px;
  border-top: 3px solid;
  float: left;
  z-index: 2;
  position: absolute;
  left: -9999px;
  top: 92px;
  opacity: 0;
  filter: alpha(opacity=0);
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  -ms-border-radius: 4px;
  -o-border-radius: 4px;
  border-radius: 4px;
  -webkit-transition: opacity 0.3s ease 0s;
  -moz-transition: opacity 0.3s ease 0s;
  -ms-transition: opacity 0.3s ease 0s;
  -o-transition: opacity 0.3s ease 0s;
  transition: opacity 0.3s ease 0s;
}
<nav class="menu">
  <ul id="menu-navigation">
    <li>
      <a href="/">الصفحة الرئيسية</a>
    </li>
    <li>
      <a href="#">الأخبار</a>
      <ul class="nav nav-second-level" style="right: 10%; left: auto; top: 75%;">
        <li>
          <a>التقارير الدورية</a>
        </li>
        <li>
          <a>الورش و الزيارات الميدانية</a>
        </li>
      </ul>
    </li>
  </ul>
</nav>

The thing is when hovering on submenu area, submenu is viewed when it shouldn't.

You can refer to https://rahmaunion.org/ and hover beneath "الأخبار" to see the issue in real.

Removing right: 10%; left: auto; from inline css fixes the issue, but changes submenu direction

Upvotes: 1

Views: 56

Answers (1)

Seyhmus Gokcen
Seyhmus Gokcen

Reputation: 248

That is because only opacity is not enough on disappearing the sub menu. It makes it transparent only. The submenu is still remain on the page and get the :hover event. You should mix it with the visiblity property too and use it in the transition

For Example;

#menu-navigation > li:hover:before, #menu-navigation > li:hover:after, #menu-navigation > li.active:before, #menu-navigation > li.active:after {
    opacity: 1;
    visibility: visible;
    filter: alpha(opacity=100);
}

.menu ul li ul {
    width: 230px;
    border-top: 3px solid;
    float: left;
    z-index: 2;
    position: absolute;
    visibility: hidden;
    left: -9999px;
    top: 92px;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    -o-border-radius: 4px;
    border-radius: 4px;
    -webkit-transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s;
    -moz-transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s;
    -ms-transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s;
    -o-transition: opacity 0.3s ease 0s, visibility 0.3s ease 0s;
    transition: opacity 0.3s ease 0, visibility 0.3s ease 0ss;
}

I did not test it but I guess it should be fine but if you can provide a simple jsfiddle or codepen, I know I can help you much more.

Upvotes: 1

Related Questions