Trik Cara Membuat Menu Drop Down Menggunakan CSS
Membuat menu dropdown pada menggunakan css itu sangat mudah, berikut saya akan bagikan tulisan tentang bagiman membuatnya,
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cara Membuat Menu Dengan CSS</title>
<link rel="stylesheet" type="text/css" href="menu.css" media="all" />
</head>
<body>
<div class="menu-wrap">
<ul>
<li><a href="beranda.html">Home</a></li>
<li><a href="tentang.html">Tentang</a></li>
<li><a href="kontak.html">Hubungi Kami</a>
</li>
</ul>
</div>
</body>
</html>
Itulah contoh dari menu drop down, jika anda tertarik ikutilah langkah beriktu ini untuk mencobanya:
1. Ketiklah kode berikut ini pada text editor anda dan simpan dengan nama file menu.css
1. Ketiklah kode berikut ini pada text editor anda dan simpan dengan nama file menu.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;
}
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;
}
2. Untuk langkah kedua silahkan anda ketik kode berikut ini dan simpan dengan nama file index.html
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cara Membuat Menu Dengan CSS</title>
<link rel="stylesheet" type="text/css" href="menu.css" media="all" />
</head>
<body>
<div class="menu-wrap">
<ul>
<li><a href="beranda.html">Home</a></li>
<li><a href="tentang.html">Tentang</a></li>
<li><a href="kontak.html">Hubungi Kami</a>
</li>
</ul>
</div>
</body>
</html>
Jika sudah selesai simpanlah kedua file tersebut kedalam satu folder dan jangan dipisahkan karena file index.html membutuhkan file menu.css untuk menampilkan menu dropdown, jika keduanya dipisahkan maka menu tidak akan tampil dengan semestinya.
Comments
Post a Comment
Tinggalkan Komentar