Dropdown Hover Menu + Underline Hover Effect
Tags: html, css, hovereffects, dropdownmenu
Published: 2023-01-23 13:31:52

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](https://github.com/bandadismas/hover-menu).


{% codepen https://codepen.io/Dizmas/pen/LYBQmQO %}