I'm building a custom theme from scratch and I'm stuck on this dropdown styling. I am able to have the sub-menu appear when its containing <li> is hovered but when I go to transition my mouse off the parent <li> and onto the sub menu and it's items, it disappears. Would love a quick solution on how to keep the sub-menu open when I'm hovering it and its children. Here are the styles I have so far (in LESS form).

.primary-nav .nav-links ul li .sub-menu {
  margin-top: 0;
  position: absolute;
  top: 55px;
  background-color: #EEEEEE;
  display: none;
  min-width: 150px;
  right: 0;
  padding: 5px 0 5px 5px;
    float: none;
.primary-nav .nav-links #menu-primary > li > a{
  height: 90px;
  padding-top: 30px;
  display: block;
.primary-nav .nav-links #menu-primary > li {
      display: block;

You should add a class called has-children to all inner li's. You can use wp_nav_menu_objects to add the has-children class.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.