menu dropdown blog

Kali ini saya akan ngepost tentang menu pada blog. Menu yang saya bahas kali ini berbeda dengan menu" yang lain yang statis, atau tetap, melainkan sebaliknya, yaitu menu yang dinamis yang biasa disebut menu dropdown. Dari namanya saja mungkin anda sudah tahu kan ??

Menu dropdown ialah menu yang selalu bergerak sesuai dengan keadaan jendela browsing anda. Memang sich, letaknya selalu diatas, akan tetapi menu ini dapat bergerak sesuai kondisi jendela browsing anda. Jika anda ingin ke bawah, maka dengan sendirinya menu tersebut akan mengikuti..... Supaya tidak panjang lebar,
langsung saja, ini script buat menu dropdown pada blog:



<style type="text/css">
#dsr ul li a {position: relative;float: bottom;display: block;width: AUTO;height: 12px;padding: 5px 0 0 0;margin-right: 5px;text-align: center;font-size: 12px;text-decoration: none;color:transparant;font-weight: bold;outline: none;}#dsr li .current{color: transparant;}#dsr li a:hover, #dsr li a:active {background: #4B0082;background: -webkit-gradient(linear, left top, left bottom, from(#4B0082), to(#FF0000)); background: -moz-linear-gradient(top,#4B0082, #FF0000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B0082', endColorstr='#FF0000'); display: inline-block;zoom: 1; *display: inline;border: dotted 1px #555555;padding: 3px 5px;-webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: 0 1px 0px rgba(1,0,0,.1); -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1); box-shadow: 0 1px 0px rgba(0,0,0,.1); -webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);}color: #ffffff;margin: 0;font-size:18px;padding: 9px 12px 8px;text-decoration: none;}#dsr {width: auto;float: left;margin: 0;padding: 0;}#dsr {margin: 0;padding: 0;}#dsr ul {float: left;list-style: none;margin: 0;padding: 0;}#dsr li {list-style: none;margin: 0;padding: 0;}#dsr li a, #dsr li a:link, #dsr li a:visited {color: #ffffff;display: block;text-transform: capitalize;margin: 0;padding: 9px 12px 8px;font: Bold 12px Georgia, Arial;}#dsr li a:hover, #dsr li a:active {background:transparant;color: #ffffff;margin: 0;font-size:15px;padding: 9px 12px 8px;text-decoration: none;}#dsr li li a, #dsr li li a:link, #dsr li li a:visited {background: #00FFFF;background: -webkit-gradient(linear, left top, left bottom, from(#00FFFF), to(#000000)); background: -moz-linear-gradient(top,#00FFFF, #000000); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00FFFF', endColorstr='#000000'); width: 150px;color: #E6E6FA;-webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 20px; border-style: outset;-webkit-transition:all 0.5s ease-in-out; -moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out; -webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);-o-transform:rotate(0deg);float: none;margin: 0;padding: 7px 10px;border-bottom: transparant;border-left: transparant;border-right: transparant;font: bold 14px Arial, Arial;}#dsr li li a:hover, #dsr li li a:active {background: #FF0000;background: -webkit-gradient(linear, left top, left bottom, from(#FF0000), to(#00FF00)); background: -moz-linear-gradient(top,#FF0000, #00FF00); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0000', endColorstr='#00FF00'); color: #ffffff;font-size:15px;font-family:Arial;text-align: center;padding: 7px 10px;}#dsr li {float: left;padding: 0;}#dsr li ul {z-index: 9999;position: absolute;left: -999em;height: 15px;width: 170px;margin: 0;padding: 0;}#dsr li ul a {width: 140px;}#dsr li ul ul {margin: -32px 0 0 171px;}#dsr li:hover ul ul, #dsr li:hover ul ul ul, #dsr li.sfhover ul ul, #dsr  li.sfhover ul ul ul {left: -999em;}#dsr  li:hover ul, #dsr  li li:hover ul, #dsr  li li li:hover ul, #dsr  li.sfhover ul, #dsr  li li.sfhover ul, #dsr  li li li.sfhover ul {left: auto;}#dsr  li:hover, #dsr  li.sfhover {position: static;}#footer-column-divide {clear:both;}#dsr{font-family:Comic Sans Ms;background:#000 url(http://lh3.googleusercontent.com/--yFvMZBnK48/TzmfWtqrwTI/AAAAAAAAAnM/0eNsFnXHcHo/s35/catmenu.jpg)repeat-x;(0,0,0, 0.80);border:1px solid #C0C0C0;padding:2px 0;z-index:999;top:0px;left:190px;right:190px;position:fixed;-moz-border-radius:10px;-webkit-border-radius:10px;}
</style>

<div id='dsr'>
<ul id='dsr'>
<li><a href='Link Label blog anda'>Home</a></li>

<li><a href='Link Label blog anda'>Nama Label</a>
<ul class='children'>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
</ul>


<li><a href='Link Label blog anda'>Nama Label</a>
<ul class='children'>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
</ul>
</li>

<li><a href="Link Label blog anda" target='_blank'>Nama Label</a>
<ul class='children'>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
</ul>
</li>

<li><a href="Link Label blog anda" target='_blank'>Nama Label</a>
<ul class='children'>
<li><a href="Link Label blog anda" target="_blank">Nama Label</a></li>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
</ul>

<li><a href='Link Label blog anda'>Nama Label</a>
<ul class='children'>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
</ul>


<li><a href='Link Label blog anda'>Nama Labelt</a>
<ul class='children'>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
</ul>

<li><a href='Link Label blog anda'>Nama Label</a>
<ul class='children'>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
<li><a href="Link Label blog anda" target='_blank'>Nama Label</a></li>
</ul>

<li><a href='link label blog anda' target='_blank'><blink>Tukar Link</blink></a></li>
</li></li></li></li></li></ul>
</div>



dikutip dari   http://dunovtek.blogspot.com/