DropDown Hover Pure CSS

Postingan kali ini sekedar fun-fun saja sob. Soalnya perasaan pernah mempublikasikan triknya tapi Beben Koben si bloglang anu ganteng kalem tea ini lupa :D Trik sekitaran dropdown! Pada umumnya kinerja drop-down ada yang diklik dahulu, atau hanya disorot oleh cursor :D
Metode sorot sama kursor yang akan Beben bagi sekarang. Karena prasaan sudah pernah memostingnya bagi sobat yg kepengen mengikuti caranya dengan menggunakan sebuah image (gambar) silahkan meluncur Pro Blog Design and here for demo CSS Rollover Blogroll.Kalau versi aslinya memakai gambar, kini kita buat yuk versi murni dengan CSS doang ;) Simple drop down seperti berikut:

ProdigyBen Tools
Bumbu-bumbu dropdown hover pure css rollover

<style type="text/css">
.blogroll {
position:relative;
width:100%;
}
.blogroll p {
width:99%;
height:21px;
background:#5566FF;
text-align:center;
margin:0;
color:#fff;
font-weight:900;
}
.blogroll ul {
width:99%;
background:#fff;
border:1px solid #5566FF;
border-width:0 1px 1px 1px;
position:absolute;
left:0;
top:21px;
margin:0;
padding:0;
list-style:none;
}
.blogroll ul a:link, .blogroll ul a:visited {
display:block;
width:98%;
padding:1px 10px 1px 10px;
text-decoration:none;
color:#000;
font-weight:normal;
}
.blogroll ul a:hover, .blogroll ul a:active {
background:#8A95FF;
}
.blogroll {
height:21px;
overflow:hidden;
}
.blogroll:hover {overflow:visible;}
.blogroll {display:none;}
html>body .blogroll {display:block;}
</style>

<div class="blogroll">
<p>Blogroll</p>
<ul>
<li><a href="http://www.site.com/" title="" target="_blank">Name Site0</a></li>
<li><a href="http://www.site.com/" title="" target="_blank">Name Site1</a></li>
<li><a href="http://www.site.com/" title="" target="_blank">Name Site2</a></li>
<li><a href="http://www.site.com/" title="" target="_blank">Name Site3</a></li>
<li><a href="http://www.site.com/" title="" target="_blank">Name Site4</a></li>
<li><a href="http://www.site.com/" title="" target="_blank">Name Site5</a></li>
<li><a href="http://www.site.com/" title="" target="_blank">Name Site6</a></li>
<li><a href="http://www.site.com/" title="" target="_blank">Name Site7</a></li>
<li><a href="http://www.site.com/" title="" target="_blank">Name Site8</a></li>
<li><a href="http://www.site.com/" title="" target="_blank">Name Site9</a></li>
</ul>
</div>

Seperti biasa dimasukin ke Add a Gadget ► HTML/Javascript. Rubah warna sesuai kebutuhan. Udah ah...wong prasaan sudah pernah ini =))
Happy dropdown \m/