I am trying to customize my dropdown menu so that when I hover over the main menu item (Sample Page), only the About submenu is displayed, not all of the dropdown menus.
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>