Dropdown Hover Menu + Underline Hover Effect

Dismas Banda — Mon, 23 Jan 2023 13:31:52 +0000

In this tutorial, we are going to create an underline hover effect and a dropdown menu on the menu items.

First, let's create our navbar.

<nav>
        <ul>
            <li class="menu-item"><a href="#">Home</a></li>
            <li class="menu-item"><a href="#">About Me</a></li>
            <li class="menu-item"><a href="#">Languages</a></li>
            <li class="menu-item"><a href="#">Frameworks</a></li>
        </ul>
</nav>

Let us now style the navbar so that it sits in the middle and looks pretty.

nav {
    display: flex;
    justify-content: center;
    background-color: #fff;
    box-shadow: 0 10px 40px rgba(159, 162, 177, .8);
}

nav ul {
    display: flex;
    list-style-type: none;
}

.menu-item {
    padding: 1rem 2rem;
    color: #83818c;
    position: relative;
}

We choose display flex for both the nav and ul so that all the items can sit nicely in a row. We remove the bullet points from the unordered list by setting the list-style-type to none.

Adding the Underline hover effect

To add the underline hover effect we need to use the ::before selector instead of the bottom border. This is because changing the border while the page has loaded will change the size of the elements which may cause the html elements to rearrange.

.menu-item:before {
    content: "";
    height: 3px;
    position: absolute;
    background-color: #00ABC7;
    bottom: 0;
    left: 0;
    width: 100%;
    border-radius: 8px;
    transform: scaleX(0); 
    transition: transform 0.3s ease;
}

.menu-item:hover:before {
    transform: scaleX(1);
}

You can add transform-origin so that the underline transforms from either left or right instead of the center as in our case.

Adding the dropdown Menu

First, let's add the submenu items to our html. Each submenu item sits under the menu item under an unordered list with a class of submenu.

<li class="menu-item"><a href="#">Home</a></li>
            <li class="menu-item"><a href="#">About Me</a>
                <ul class="submenu">
                    <li>Education</li>
                    <li>Experience</li>
                </ul>
            </li>
            <li class="menu-item"><a href="#">Languages</a>
                <ul class="submenu">
                    <li>Java</li>
                    <li>JavaScript</li>
                    <li>Python</li>
                    <li>C/C++</li>
                </ul>
            </li>
            <li class="menu-item"><a href="#">Frameworks</a>
                <ul class="submenu">
                    <li>ExpressJs</li>
                    <li>ReactJs</li>
                    <li>Django</li>
                    <li>Flask</li>
                </ul>
            </li>

We then give the submenu class a display of flex and a flex-direction of column to properly align them. We hide the submenu by setting its visibility to hidden and opacity to 0. We'll show the submenu when we hover over the menu items by setting its visibility value to visible.

.submenu {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0;
    top: 35px;
    width: 100%;
    padding: 0;
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    transform: translateY(50px);
    transition: all 0.5s ease;
}

.menu-item:hover .submenu {
    visibility: visible;
    opacity: 1;
    top: 60px;
    transform: translateY(0px);
}

With that, we have a smooth underline hover effect and dropdown hover menu. You can experiment with the code in the codepen below or you can check it out on github by following this link.

DEV Community: Dismas Banda

Dropdown Hover Menu + Underline Hover Effect

Adding the Underline hover effect

Adding the dropdown Menu