Highlighted Parent Item in Dropdown Menus

Written by Michael Lee on October 10, 2014

Dropdown menus are a UI design pattern you see on websites. Most commonly, they are used in a site’s nav.

While implementing a dropdown menu in a project I thought to myself, it’d be great if the parent item of the submenu was highlighted. This is so that even though the parent item isn’t being hovered over, there would be a visual cue that the current submenu I’m navigating belongs to it’s parent.

Here’s an example of what I’m trying to accomplish:

Here’s an example of the HTML I used to setup my menu.

<nav role='navigation'>
  <ul class="menu">
    <li class="menu-item">
      <a href="javascript:;">About</a>
    </li>
    <li class="menu-item">
      <a href="javascript:;">Works<span class="ion-arrow-down-b menu-item-icon"></span></a>
      <ul class="menu-submenu">
        <li class="menu-submenu-item"><a href="javascript:;">Design</a></li>
        <li class="menu-submenu-item"><a href="javascript:;">Dev</a></li>
        <li class="menu-submenu-item"><a href="javascript:;">Writings</a></li>
      </ul>
    </li>
    <li class="menu-item">
      <a href="javascript:;">Contact Us</a>
    </li>
  </ul>
</nav>

As you can see, it’s a simple unordered-list menu. In the second list-item, you see that I have another unordered-list that is used for the submenu.

...
<li class="menu-item">
  <a href="javascript:;">Works<span class="ion-arrow-down-b menu-item-icon"></span></a>
  <ul class="menu-submenu">
    <li class="menu-submenu-item"><a href="javascript:;">Design</a></li>
    <li class="menu-submenu-item"><a href="javascript:;">Dev</a></li>
    <li class="menu-submenu-item"><a href="javascript:;">Writings</a></li>
  </ul>
</li>
...

When selecting an item from the submenu, I want the parent item to also be highlighted. This could be accomplished with CSS.

Here’s the chunk of my code that accomplishes this.

...
.menu-item{
  display: inline-block;
  margin-left:   0.5em;
  margin-right:  0.5em;
  
  position: relative;
  padding-bottom: 10px;
  a{
    color: #333;
  }
  &:hover .menu-submenu{
    display: block;
  }
  &:hover > a{
    color: #4F8EF7;
  }
}
...

Specifically, the rule when .menu-item is hovered over. The :hover rule is saying, when .menu-item is being hover, then change the color of the immediate child a elements.

In placing the :hover rule on the element that encompasses the menu item link and the submenu — instead of the actual link — you’re able to achieve having the parent item stay highlighted while you hover over the submenu.

Here’s a demo of the dropdown menu with highlighting parent items.

See the Pen Highlighted Parent Item in Dropdown Menus by Michael Lee (@michaellee) on CodePen.

Thanks for taking the time to read this article. I'd love to stay in touch and share more tips on programming and design, side projects and working remotely. Sign up and I'll send you my articles straight to your email.

:wave: Hey hey, I'm Michael Lee! I really appreciate you taking the time to read this article.

Be sure to check out my other articles.