Membuat Menu Dropdown Dengan CSS

Hay , kali ini saya akan memberikan tutorial membuat menu dropdown dengan CSS .
Oke langsung aja ya ...

1. Pertama ketikan source kode berikut ke dalam notepad , hahha

<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a>
<div class="cb"></div>
<ul>

<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">Home</a></li>
</ul>
</div>

2. kemudian ketika kode CSS berikut :

#menu ul{
float:left;
margin:0;
padding:0;

}
#menu ul li{
float:left;
position:relative;
list-style:none;
box-shadow:1px 0px rgba(0,0,0,0.8) , 2px 0px #888;
}
#menu li ul{
float:left;
position:absolute;
top:38px;
display:none;
}
#menu ul li a{
background:none;
float:left;
text-decoration:none;
color:#fff;
padding:0.75em 1.4em;
display:block;
font-family:arial;
font-size:13px;
-webkit-transition:all 0.3s ease-in-out;
-moz-transition:all 0.3s ease-in-out;
}
#menu ul li ul li{
float:left;

}
#menu ul li ul li a{
background:rgba(0,0,0,1);

float:left;
width:200px;
}
#menu ul li a:hover{
background:rgba(24 ,116 ,205, 1);
}

#menu li:hover ul , li.over ul{display:block;}


3. Save Kemudian jalankan di web browser anda .


Oke sekian tutorial dari saya . Terima Kasih

Bagikan Artikel ini