Monday, December 30, 2019

Cara Membuat Dropdown CSS Sederhana Type 1

Cara Membuat Dropdown CSS Sederhana Type 1

HobbyTekno - Halo, setelah sekian lama Admin tidak post karena sibuk. Kali ini admin akan memberikan bagaimana caranya membuat Dropdown Sederhana. Hasilnya akan seperti berikut :

Langsung saja kita bahas cara membuatnya.

Langkah-Langkah Membuat Dropdown Sederhana Type 1


1. Salin kode dibawah ini, lalu save sebagai index.html, terserah sih asalkan ekstensinya .html ya.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Dropdown Sederhana</title>
    <link rel="stylesheet" type="text/css" href="style.css" media="all" />
  </head>
<body>
  <div class="menu-wrap">
<ul>
<li><a href="home.html">Home</a></li>
<li><a href="tentang.html">Tentang</a></li>
<li><a href="kontak.html">Kontak</a>
<ul>
<li><a href="alamat.html">Alamat</a></li>
<li><a href="kebijakan.html">Kebijakan</a></li>
</ul>
</li>
</ul>
  </div>
</body>
</html>

2. Nah, kode berikut adalah Style atau CSS nya. simpan file berikut sebagai style.css

* {margin:0; padding:0;}

body {
background-color:#fff;
font-family:Arial, Helvetica, sans-serif;
color:#FFF;
}

.menu-wrap {
background-color:#53bd84;
height:50px;
line-height:50px;
position:relative;
width:770px;
margin:auto;
margin-top:80px;
}

.menu-wrap ul {
list-style:none;
}

.menu-wrap ul li a {
float:left;
width:150px;
display:block;
text-align:center;
color:#FFF;
text-decoration:none;
text-transform:uppercase;
}

.menu-wrap ul li a:hover {
background-color:#666;
display:block;
}

.menu-wrap ul li:hover ul {
display:block;
}

.menu-wrap ul ul {
display:none;
list-style:none;
position:absolute;
background-color:#53bd84;
left:300px;
top:50px;
width:190px;
}

.menu-wrap ul ul li a {
float:none;
display:block;
padding-left:30px;
text-align:left;
width:160px;
}

.menu-wrap ul ul li a:hover {
color:#fff;
}

Sekian Cara Membuat Dropdown CSS Sederhana Type 1, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar

Komentar


EmoticonEmoticon