CODEWITHSUNDEEP
jqueryhtmlcss
name name2
name name2

Reputation: 123

Show dropdown menu

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>

Upvotes: 0

Views: 111

Answers (2)

Roy Sonasish
Roy Sonasish

Reputation: 4599

use immediate children selector

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

here is the jsfiddle

for reference read this answer

Upvotes: 1

Mike Trinh
Mike Trinh

Reputation: 1303

Use > selector

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

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

Upvotes: 3

Related Questions