Pertama kita buat dulu file css nya dengan mengetikan coding dibawah ini
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
margin: 0; padding: 0; border: 0;
}
body {
background: #fff;
font-family: Helvetica, sans-serif; font-size: 18px; line-height: 24px;
}
nav {
margin: 100px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #53bd84;
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #666;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #fff; text-decoration: none;
}
nav ul ul {
background: #53bd84; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #53bd84;
border-bottom: 1px solid #53bd84; position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #666;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
kemudian simpan file dengan nama style.css
Setelah itu kita buat file htmlnya dengan code dibawah ini
<html>
<head>
<meta charset="utf-8" />
<title>Membuat Menu Dropdown</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tutorial</a>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a>
<ul>
<li><a href="#">Pemula</a></li>
<li><a href="#">Mahir</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Nyekrip</a>
<ul>
<li><a href="#">Ngoding</a></li>
<li><a href="#">Nyekrip Yuk</a></li>
</ul>
</li>
<li><a href="#">Tentang</a>
<ul>
<li><a href="#">Kontak</a></li>
<li><a href="#">Blog</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
simpan dengan nama latihan css.html
body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, input, textarea, blockquote {
margin: 0; padding: 0; border: 0;
}
body {
background: #fff;
font-family: Helvetica, sans-serif; font-size: 18px; line-height: 24px;
}
nav {
margin: 100px auto;
text-align: center;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
background: #53bd84;
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: #666;
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #fff; text-decoration: none;
}
nav ul ul {
background: #53bd84; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #53bd84;
border-bottom: 1px solid #53bd84; position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #666;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}
kemudian simpan file dengan nama style.css
Setelah itu kita buat file htmlnya dengan code dibawah ini
<html>
<head>
<meta charset="utf-8" />
<title>Membuat Menu Dropdown</title>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<nav>
<ul>
<li><a href="#">Beranda</a></li>
<li><a href="#">Tutorial</a>
<ul>
<li><a href="#">PHP</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">HTML</a>
<ul>
<li><a href="#">Pemula</a></li>
<li><a href="#">Mahir</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Nyekrip</a>
<ul>
<li><a href="#">Ngoding</a></li>
<li><a href="#">Nyekrip Yuk</a></li>
</ul>
</li>
<li><a href="#">Tentang</a>
<ul>
<li><a href="#">Kontak</a></li>
<li><a href="#">Blog</a></li>
</ul>
</li>
</ul>
</nav>
</body>
</html>
simpan dengan nama latihan css.html
Sumber: bharatakreatif.blogspot.co.id
