Home » bali media design » Cara membuat menu dropdown cantik dengan CSS

Ketemu lagi,,, sekarang saya akan melanjutkan postingan yang kemarin tentang cara membuat menu horisontal CSS, Nah sekarang saya akan berbagi ilmu cara membuat menu dropdown dengan menggunakan CSS. Kalo udah belajar programming berarti banyak skali ilmu yang harus kita ketahui terutama di bidang pemrograman web, dan terkadang kita pasti perlu menggunakan menu dropdown pada website yang kita buat. Ada banyak cara diantaranya menggunakan CSS dan Javascript/Jquery bedanya kalau menggunakan CSS agak sedikit kaku, sedangkan dengan javascript/JQuery kesan nya lebih dinamis. Tapi hasil menu dropdown berikut ini lumayan bagus kok menurut saya. hehe berikut kode lengkapnya , siapkan teks editor mu lalu copy-paste kode dibawah ini :

<html>
<head>
<title>tes2</title>
</head>
<style type=”text/css” media=”screen”>

#menu{
padding-left: 320px;
margin-bottom: 10px;
}

#menu ul {
margin: 0;
padding: 0;
text-align: center;
}
#menu li {
float: left;
list-style: none;
}
#menu ul ul {
visibility:hidden;
padding-left:0px;
width:10px;
}
#menu ul ul li{
padding-left:0px;
list-style: none;}

#menu ul li:hover ul,
#menu ul a:hover ul{
visibility:visible;
background-color:#fff;
}

#menu ul ul li a:hover{
background-color:#d3d3d3;

}

#menu li a {
background-color:#000000;
height: 2em;
width: 149px;
display: block;
border: 0.1em solid #dcdce9;
color: #ffffff;
text-decoration: none;
text-align: center;
}
#menu li a:hover{
background-color:#d3d3d3;
}

</style>
<body>

<div id=”menu” >
<ul>
<li><a href=”URL 1″>MENU 1</a>
<ul>
<li><a href=”URL sub 1″>Sub menu 1</a></li>
<li><a href=”URL sub 2″>Sub menu 2</a></li>
<li><a href=”URL sub 3″>Sub menu 3</a></li>
</ul>
</li>
<li><a href=”URL 2″>MENU 2</a></li>
<li><a href=”URL 3″>MENU 3</a></li>
</ul>
</div>
</body>
</html>

1. Simpan dengan nama menudopdown.html atau apa aja boleh yang penting ekstensi file nya .html

2. Kemudian tes di browser mu

3. Hasilnya seperti ini :

cara membuat menu dropdown dengan css

Selamat mencoba….

Incoming search terms:

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*

What is 6 + 6 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)
Google+ Plus Follow on Twitter Like On Facebook Email to us

Latest

cara menampilkan kode html dalam postingan
Cara cek artikel yang sudah di index oleh mesin pencari google
Cara disable pesan update notification di wordpress
Cara Merubah URL Login WordPress
menghapus watermark WonderPlugin Slider Free Version 4.3

Recent Posts

Visitor Counter