<div id=”menu”>
<ul>
<li><a href=”">Home</a></li>
<li>
<a href=”">News</a>
<ul>
<li><a href=”">Website</a></li>
<li><a href=”">Mobile</a></li>
<li><a href=”">Android</a></li>
</ul>
</li>
<li><a href=”">About Us</a></li>
<li><a href=”">Contact Us</a></li>
<li><a href=”">Service</a></li>
<li><a href=”">Portfolio</a></li>
</ul>
</div>
</body>
Sedangkan style di bagian headnya kira-kira seperti ini
<style type=”text/css”>
#menu{
width:auto;
height:30px;
padding:8px 0 0px 0;
background:#0057C7;
}
#menu ul{
margin:0;
}
#menu ul li{
list-style-type:none;
margin:0;
float:left;
}
#menu ul li a{
font-family:Arial;
text-decoration:none;
margin:0 10px 0 0;
font-size:12px;
color:#fff;
}
#menu ul li ul.child{
display:none;
}
#menu ul li:hover ul.child{
display:block;
position:absolute;
z-index:2;
text-align:left;
}
#menu ul li:hover ul.child li a{
display:block;
padding:10px 20px 10px 20px;
background:#0057C7;
margin:0 0 0 -20px;
}
#menu ul li:hover ul.child li{
float:none;
margin:0 0 0 -30px;
}
#menu ul li a:hover{
text-decoration:underline;
}
</style>
Yang terjadi sebetulnya kita membuat popup menu memanfaatkan unordered list <ul>. Dimana di dalamnya terdapat kelas parent dan child seperti ini :
Dan yang membuat mereka menjadi terlihat popup adalah
Ketika kondisi normal, atau dengan kata lain li anak parent tidak di hover. Maka yang terjadi adalah ul.childnya disembunyikan.
#menu ul.parent li ul.child{
display:none;
}
dan ketika li anak parent di hover maka ul.childnya di tampilkan.
#menu ul.parent li:hover ul.child{
display:block;
position:absolute;
z-index:2;
text-align:left;
}
Mudah sekali bukan? Ya begitulah cara membuat popup menu dengan menggunakan css saja. Selamat mencoba.
Posting Komentar
Berkata: