DEV Community

Cover image for Hover menu using CSS - A step-by-step guide
Designyff
Designyff

Posted on • Edited on • Originally published at designyff.com

Hover menu using CSS - A step-by-step guide

HTML

For HTML we have a div element with class "menu_item", which represent one menu item.

Inside "menu_item", first element is a span element with title. For now I'll just put one menu item: "Shop", later I'll add the others.

Beneath title, we have a div element with "submenu" class. Here goes submenus which won't be seen until hover.

And inside "submenu", we'll place all our submenus as span elements.

It should look something like this:

<div class="menu_item">
    <span>Shop</span> <!--  title  -->

    <div class="submenu"> <!--  submenus  -->
        <span>Shirts</span>
        <span>Shoes</span>
        <span>Bags</span>
    </div>
</div>
Enter fullscreen mode Exit fullscreen mode

CSS

"menu_item" class will be used just to align everything.

.menu_item {
    width: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
Enter fullscreen mode Exit fullscreen mode

All span elements inside element with "menu_item" class will have 1px transparent border, because we'll color it later on hover, and we don't want our height to change.

And we'll just add the transition, pointer, paddings (5px top and bottom, 0 left and right), and we'll align text to center.

.menu_item span {
    border: 1px solid transparent;
    transition: .3s;
    padding: 5px 0;
    cursor: pointer;
    width: 100%;
    text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

On hover, using '>' selector, we'll select direct child, which is the title, and color top and bottom border, as mentioned before.

Of course, we'll add transition property, so that the border changes it's color smoothly.

.menu_item:hover > span {
    border-color: #000 transparent;
    transition: .3s;
}
Enter fullscreen mode Exit fullscreen mode

We'll decrease the font of all submenu items and align them in columns.

We'll set the width to 0, and then back to 80px on hover, so we'll have a nice appearing effect.

Let's also hide everything that overflows.

And, of course, the transition, so that the appearing effect, mentioned before, we'll be smooth.

.submenu {
    font-size: 14px;
    display: flex;
    flex-direction: column;
    width: 0px;
    overflow: hidden;
    transition: .3s;
}
Enter fullscreen mode Exit fullscreen mode

Now simply on hover just set width back to 80px and add transition.

.menu_item:hover .submenu {
    width: 80px;
    transition: .3s;
}
Enter fullscreen mode Exit fullscreen mode

Now we'll set the cursor property to pointer for submenu items.

.submenu:hover {
    cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

And add top and bottom paddings to each submenu and align text to center.

.submenu span {
    padding: 5px 0;
    text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

On hover, just change the background color. I'll set transparent black.

.submenu span:hover {
    background-color: rgba(0, 0, 0, .1);
}
Enter fullscreen mode Exit fullscreen mode

And that is it.

We can now add more elements to our menu.

For menu items that have submenus, just copy and paste the same html code.

As for menu items that don't have submenus, just add the new menu_item with title, and without submenu element.

<!--  New menu item without submenus  -->
<div class="menu_item">
  <span>Home</span> <!--  title  -->
</div>

<div class="menu_item">
  <span>Shop</span> <!--  title  -->

  <div class="submenu"> <!--  submenus  -->
    <span>Shirts</span>
    <span>Shoes</span>
    <span>Bags</span>
  </div>
</div>

<!--  New menu item with submenus  -->
<div class="menu_item">
  <span>Settings</span> <!--  title  -->

  <div class="submenu"> <!--  submenus  -->
    <span>Account</span>
    <span>Password</span>
    <span>Security</span>
  </div>
</div>
Enter fullscreen mode Exit fullscreen mode

Video tutorial:

You can find the whole code with video tutorial here.

Thank you for reading ❤️

Top comments (2)

Collapse
 
rohitmore07 profile image
Rohit More

Found useful

Collapse
 
designyff profile image
Designyff

Thank you ☺️