Faber Nainggolan Blog's

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.