Dropdown Menu Simple dan Cantik menggunakan CSS

Jumpa kembali dengan tutorial saya, kali ini saya akan membagikan tutorial mengenai CSS dropdown menu. Silakan di lihat langkah demi langkah

silakan di simpan dengan nama menu.html

<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,800,300" rel="stylesheet" type="text/css"/>
<h1>Dropdown Menu Simple CSS</h1>
<nav class="nav">
  <ul class="nav__menu">
    <li class="nav__menu-item"><a>Home</a></li>
    <li class="nav__menu-item"><a>Services</a>
      <ul class="nav__submenu">
        <li class="nav__submenu-item"> <a>Web Design</a></li>
        <li class="nav__submenu-item"> <a>Web Development</a></li>
        <li class="nav__submenu-item"> <a>Web Hosting</a></li>
      </ul>
    </li>
    <li class="nav__menu-item"><a>About</a>
      <ul class="nav__submenu">
        <li class="nav__submenu-item"> <a>Our Company</a></li>
        <li class="nav__submenu-item"> <a>Our Team</a></li>
        <li class="nav__submenu-item"> <a>Our Skills</a></li>
      </ul>
    </li>
    <li class="nav__menu-item"><a>Blog</a></li>
    <li class="nav__menu-item"><a>Contact</a></li>
  </ul>
</nav>

Style CSS untuk html nya silakan di buatkan simpan dengan nama menu.css

html {
box-sizing: border-box;
}

*, *:before, *:after {
box-sizing: border-box;
}

body {
margin: 0;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.5;
background: #009688;
}

nav ul {
list-style: none;
padding-left: 0;
margin-top: 0;
margin-bottom: 0;
}

h1 {
width: 500px;
margin: 100px auto 20px;
color: #f0f0f0;
text-align: center;
}

.nav {
width: 500px;
margin: 0 auto;
background: #004c45;
color: #f0f0f0;
}
.nav a {
display: block;
padding: 0 16px;
line-height: inherit;
cursor: pointer;
}
.nav__menu {
line-height: 45px;
font-weight: 700;
text-transform: uppercase;
}
.nav__menu-item {
display: inline-block;
position: relative;
}
.nav__menu-item:hover {
background-color: #0b2523;
}
.nav__menu-item:hover .nav__submenu {
display: block;
}
.nav__submenu {
font-weight: 300;
text-transform: none;
display: none;
position: absolute;
width: 220px;
background-color: #0b7369;
}
.nav__submenu-item:hover {
background: rgba(0, 0, 0, 0.1);
}

See the Pen
Menu Dropdown Simple CSS by Faber Nainggolan (@goolanz)
on CodePen.