Pure CSS3 Drop-Down Menu Navigation Sub-Menu Animation

Pure CSS3 Drop-Down Menu Navigation Sub-Menu Animation: BY Kevin12 Jan,2021; Tags:
CSS3 Menu Dropdown Menu

Introduction

This is a very beautiful pure CSS3 drop-down menu navigation, this menu has two main highlights, one is the beautiful full-screen background image, very suitable for personalized personal blog use. Another feature is that the submenu has a variety of unfolding animation, there is a simple fade in and fade out, but also a cool folded unfolding. And this menu when the pure CSS implementation, it is quite easy to use.

Pure CSS3 Drop-Down Menu Navigation Sub-Menu Animation

Instructions

HTML Body Code

<ul class="main">
    <li>
      <a href="#">Home</a>
      <ul class="drop menu1">
        <li><a href="#">Home</a></li>
        <li><a href="#">news</a></li>
        <li><a href="#">contact</a></li>
        <li><a href="#">about</a></li>
      </ul>
    </li>
    <li><a href="#">news</a>
      <ul class="drop menu2">
        <li><a href="#">Home</a></li>
        <li><a href="#">news</a></li>
        <li><a href="#">contact</a></li>
        <li><a href="#">about</a></li>
      </ul>
    </li>
    <li><a href="#">contact</a>
      <ul class="drop menu3">
        <li><a href="#">Home</a></li>
        <li><a href="#">news</a></li>
        <li><a href="#">contact</a></li>
        <li><a href="#">about</a></li>
      </ul>
    </li>
    <li><a href="#">works</a>
      <ul class="drop menu4">
        <li><a href="#">Home</a></li>
        <li><a href="#">news</a></li>
        <li><a href="#">contact</a></li>
        <li><a href="#">about</a></li>
      </ul>
    </li>
    <li><a href="#">team</a>
      <ul class="drop menu5">
        <li><a href="#">Home</a></li>
        <li><a href="#">news</a></li>
        <li><a href="#">contact</a></li>
        <li><a href="#">about</a></li>
      </ul>
    </li>
    <li><a href="#">about</a>
      <ul class="drop menu6">
        <li><a href="#">Home</a></li>
        <li><a href="#">news</a></li>
        <li><a href="#">contact</a></li>
        <li><a href="#">about</a></li>
      </ul>
    </li>
  </ul>

Css Code

body {
  background-color: #1e1e1e;
  background-image: url(https://static.pexels.com/photos/8395/lights-night-unsharp-blured.jpg);
  background-size: cover;
  height: 100vh;

  font-family: "Raleway", sans-serif;
  letter-spacing: 1px;
}
h1 {
  text-align: center;
  color: #fff;
  padding-top: 20px;
}

ul {
  list-style: none;
}

nav {
  height: 40px;
  margin: 40px auto;
  background-color: rgba(23, 23, 50, 0.7);
  text-align: center;
  border-radius: 4px;
}
.main {
  display: flex;
  justify-content: center;
}
.main > li {
  margin: 0 2%;
}

VIEW NOW