Membuat menu dropdown dari CSS tanpa harus menyertakan Javascript adalah suatu hal yang mudah.
Kode untuk file dropdown.html
Kode untuk file dropdown.css
Alhamdulillah. Semoga bermanfaat! :)
/* EOF */
<!DOCTYPE html>
<html>
<head>
<link href="./dropdown.css" rel="stylesheet" />
</head>
<body>
<ul class="cls-menu">
<li><a href="javascript:void(0)">UL[1] -> LI[1]</a></li>
<li><a href="javascript:void(0)">UL[1] -> LI[2]</a>
<ul>
<li><a href="javascript:void(0)">UL[2] -> LI[1]</a></li>
<li><a href="javascript:void(0)">UL[2] -> LI[2]</a></li>
<li><a href="javascript:void(0)">UL[2] -> LI[3]</a>
<ul>
<li><a href="javascript:void(0)">UL[3] -> LI[1]</a></li>
<li><a href="javascript:void(0)">UL[3] -> LI[2]</a></li>
<li><a href="javascript:void(0)">UL[3] -> LI[3]</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="javascript:void(0)">UL[1] -> LI[3]</a>
<ul>
<li><a href="javascript:void(0)">UL[2] -> LI[1]</a></li>
<li><a href="javascript:void(0)">UL[2] -> LI[2]</a>
<ul>
<li><a href="javascript:void(0)">UL[3] -> LI[1]</a></li>
<li><a href="javascript:void(0)">UL[3] -> LI[2]</a></li>
<li><a href="javascript:void(0)">UL[3] -> LI[3]</a></li>
<li><a href="javascript:void(0)">UL[3] -> LI[4]</a></li>
</ul>
</li>
<li><a href="javascript:void(0)">UL[2] -> LI[3]</a></li>
</ul>
</li>
</ul>
</body>
</html>
Kode untuk file dropdown.css
.cls-menu {
background-color:lime;
float:none;
position:relative;;
height:36px;
}
.cls-menu a {
color:white;
display:block;
padding:5px 5px;
text-decoration:none;
}
.cls-menu ul {
background-color:red;
display:none;
float:none;
position:relative;
left:-40px;
top:7px;
}
.cls-menu li {
background:-webkit-linear-gradient(#808080, #000000);
display:block;
float:left;
height:36px;
list-style:none;
position:relative;
text-align:center;
width:100px;
-webkit-transition:color 0.2s;
}
.cls-menu li:hover > ul {
display:block;
list-style:none;
}
.cls-menu li:hover {
background:-webkit-linear-gradient(red, #404040);
}
.cls-menu ul ul {
left:60px;
top:-29px;
}
Alhamdulillah. Semoga bermanfaat! :)
/* EOF */
