0

I have dropdown menu. When I hover main menu item ( Sample Page ) I can see all dropdown menu, but I want to see only About submenu 

li.menu-item.dropdown .dropdown-menu {
  position: absolute;
  top: 70px;
  visibility: hidden;
  margin-top: 0;
}

li.menu-item.dropdown:hover .dropdown-menu {
  display: block;
}

li.menu-item.dropdown:hover .dropdown-menu {
  visibility: visible;
}
<li class="menu-item menu-item-has-children dropdown">
  <a title="Sample Page" href="#">Sample Page <span class="caret"></span></a>
  <ul role="menu" class=" dropdown-menu">
    <li class="menu-item dropdown">
      <a title="About" href="#">About</a>
      <ul role="menu" class="dropdown-menu">
        <li class="menu-item">
          <a title="Image Alignment" href="#">Image Alignment</a>
        </li>
      </ul>
    </li>
  </ul>
</li>
RaJesh RiJo
  • 4,302
  • 4
  • 25
  • 46
name name2
  • 123
  • 4
  • 10
  • add this in your css li.menu-item.dropdown:hover a:hover+.dropdown-menu { visibility: visible; } – veera Sep 18 '17 at 09:04

2 Answers2

3

Use > selector

li.menu-item.dropdown:hover > .dropdown-menu {
    display: block;
}

li.menu-item.dropdown:hover > .dropdown-menu {
    visibility: visible;
}
Mike Trinh
  • 1,271
  • 2
  • 9
  • 19
1

use immediate children selector

li.menu-item.dropdown:hover > .dropdown-menu {
    visibility: visible;
}

here is the jsfiddle

for reference read this answer

Roy Sonasish
  • 4,571
  • 20
  • 31