Dropdown Menu Bar on Hover

Dropdown Menu Bar on Hover

Author

Live Demo

Code

You can check the code used in the demo below which you can also use in your projects.

HTML

<div class="dropdown-wrapper">
  <div class="nav navigation-wrapper">
    <ul class="nav-list">
      <li class="nav-link">
        Home
      </li>
      <li class="nav-link">
        About
      </li>
      <li class="nav-link">
        <ul class="nav-sub-list">
          <li class="nav-dropdown-menu">
            <span class="nav-title">Portfolio</span>
            <ul class="dropdown-menu">
              <li>Zomato</li>
              <li>Swiggy</li>
              <li>UberEats</li>
              <li>Food Panda</li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="nav-link">Blog</li>
      <li class="nav-link">Contact</li>
    </ul>
  </div>
</div>

CSS

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@200;400;500;600;700;900&display=swap");

html,
body {
  width: 100%;
  height: 100%;
  background: #1f8775;
  margin-top: 2em;
}
li {
  list-style-type: none;
}
.navigation-wrapper > ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4em;
}
.navigation-wrapper > ul > li {
  color: #ffffff;
  font-size: 2em;
  list-style: none;
  cursor: pointer;
  position: relative;
  font-family: "Nunito", sans serif;
  font-weight: 500;
}
.navigation-wrapper > ul > li:hover::before {
  content: "";
  position: absolute;
  bottom: 0;
  height: 0;
  width: 0;
  left: 0;
  z-index: 1;
  border-bottom: 2px solid #fcfcfc;
  animation: border-move 0.5s linear;
  animation-fill-mode: forwards;
}
@keyframes border-move {
  100% {
    width: 100%;
  }
}
.nav-sub-list {
  padding: 0;
}
.nav-dropdown-menu {
  display: block;
  position: relative;
  cursor: pointer;
}
.dropdown-menu {
  min-width: 100%;
  padding: 15px 0;
  position: absolute;
  background: #fefefe;
  z-index: 100;
  transition: 0.35s;
  border-radius: 16px;
  top: 1.3em;
  width: 200px;
}
.nav-dropdown-menu:not(:hover) > .dropdown-menu {
  padding: 0;
  z-index: 9;
  background: none;
}
.dropdown-menu > * {
  overflow: hidden;
  padding: 10px 15px;
  white-space: nowrap;
  font-size: 21px;
  color: #323232;
  text-align: left;
  border-bottom: 1px solid #eeeeee;
}

.dropdown-menu > *:hover {
  background: rgba(31, 135, 117, 0.34);
}

.nav-dropdown-menu:not(:hover) > .dropdown-menu > * {
  visibility: hidden;
  height: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin: 0;
  color: rgba(25, 25, 25, 0);
  z-index: 9;
}

Technologies Used

  • HTML / CSS

About the code

Compatible browsers:- Chrome, Edge, Firefox, Opera, Safari

Responsive:- No

Dependencies: – N/A

Also Check: Search Bar Animation on Focus Using Pure HTML and CSS

Leave A Reply