Verttikal Rounded Corner



















Klik Menu diatas langsung melihat demo disini
CSS CODE;
ul#css3menu1,ul#css3menu1 ul{ margin:0;list-style:none;background-color:#C0C0C0;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII=");background-repeat:repeat;border-width:0px;border-style:solid;border-color:#999999;-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;} ul#css3menu1 ul{ display:none;position:absolute;left:100%;top:0;-moz-box-shadow:0.7px 0.7px 1px #777777;-webkit-box-shadow:0.7px 0.7px 1px #777777;box-shadow:0.7px 0.7px 1px #777777;padding:0 9px 9px;background-color:#FFF;background-image:none;border-width:1px;border-radius:4px;-moz-border-radius:4px;-webkit-border-radius:4px;border-style:solid;border-color:#d8d9da;} ul#css3menu1 li:hover>*{ display:block;} ul#css3menu1 li:hover{ position:relative;} ul#css3menu1 ul ul{ position:absolute;left:100%;top:0;} ul#css3menu1{ padding:0 1px 1px;display:block;font-size:0;float:left;} ul#css3menu1 li{ display:block;white-space:nowrap;font-size:0;} ul#css3menu1>li,ul#css3menu1 li{ margin:1px 0 0;} ul#css3menu1 a:active, ul#css3menu1 a:focus{ outline-style:none;} ul#css3menu1 a,ul#css3menu1 a.pressed{ display:block;vertical-align:middle;text-align:left;text-decoration:none;font:bold 12px Arial;color:#262626;cursor:default;} ul#css3menu1 ul li{ float:none;margin:9px 0 0;} ul#css3menu1 ul a{ text-align:left;padding:8px 0 0 0;background-color:#FFF;background-image:none;border-width:1px 0 0 0;border-style:solid;border-color:#D9D9D9;border-radius:0px;-moz-border-radius:0px;-webkit-border-radius:0px;font:13px Arial;color:#333333;text-decoration:none;} ul#css3menu1 li:hover>a{ background-color:#C0C0C0;border-style:none;font:bold 12px Arial;color:#efefef;text-decoration:none;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII=");background-position:0 100px;} ul#css3menu1 img{ border:none;vertical-align:middle;margin-right:10px;} ul#css3menu1 img.over{ display:none;} ul#css3menu1 li:hover > a img.def{ display:none;} ul#css3menu1 li:hover > a img.over{ display:inline;} ul#css3menu1 li a.pressed img.over{ display:inline;} ul#css3menu1 li a.pressed img.def{ display:none;} ul#css3menu1 span{ display:block;overflow:visible;background-position:right center;background-repeat:no-repeat;padding-right:0px;} ul#css3menu1 ul span{ background-image:url("data:image/gif;base64,R0lGODlhBwAMAOYLAOPj49TU1L6+vr+/v/r6+tra2vv7+7y8vL29vcfHx8jIyAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAHAAwAAAcrgAuCgwsFCQSECggJBokHCo2DigmECwoCA4QBBwcAkpiSi5KPkZORhYeEgQA7");padding-right:27px;} ul#css3menu1 a{ padding:10px;background-color:#C0C0C0;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII=");background-repeat:repeat;background-position:0 200px;border-width:0px;border-style:none;border-color:;color:#262626;text-decoration:none;} ul#css3menu1 li:hover>a,ul#css3menu1 li>a.pressed{ background-color:#C0C0C0;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAK8CAYAAAAu3tULAAAAAXNSR0IArs4c6QAAAAZiS0dEAAAAAAAA+UO7fwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9oJGA0jIR3UfIQAAACiSURBVEjH7ZbNCgMhDIS//LxB3/8Ve+iph6XpqRaDC4V1S5C9DImBMZlREeCmAA2kT4+AzaOSQg1JNXFQQEv6ZsuxTKTyau6XG2v2Jakpu695SRY93na92f8bUEuKrZU+NhYRDwW2Bs9vREQ4n42sgbbI+zUfFHxQTWkiTan0kSrwOuNtr/mhOgXurUkZ6Kw92I+++Z6XvkeVzlXq5bJ7GrwBxcIVRiNdtAgAAAAASUVORK5CYII=");background-position:0 100px;border-style:none;color:#efefef;text-decoration:none;} ul#css3menu1 ul li:hover>a,ul#css3menu1 ul li>a.pressed{ background-color:#FFF;background-image:none;border-style:solid;border-color:#D9D9D9;font:13px Arial;color:#0088CC;text-decoration:none;} ul#css3menu1 li.topfirst>a{ border-radius:4px 4px 0 0;-moz-border-radius:4px 4px 0 0;-webkit-border-radius:4px;-webkit-border-bottom-right-radius:0;-webkit-border-bottom-left-radius:0;text-shadow:#d8d8d8 0px 1px 1px;} ul#css3menu1 li.topfirst:hover>a,ul#css3menu1 li.topfirst>a.pressed{ text-shadow:#3d3d3d 0px -1px 1px;} ul#css3menu1 li.topmenu>a{ text-shadow:#d8d8d8 0px 1px 1px;} ul#css3menu1 li.topmenu:hover>a,ul#css3menu1 li.topmenu>a.pressed{ text-shadow:#3d3d3d 0px -1px 1px;} ul#css3menu1 li.toplast>a{ border-radius:0 0 4px 4px;-moz-border-radius:0 0 4px 4px;-webkit-border-radius:0;-webkit-border-bottom-right-radius:4px;-webkit-border-bottom-left-radius:4px;text-shadow:#d8d8d8 0px 1px 1px;} ul#css3menu1 li.toplast:hover>a,ul#css3menu1 li.toplast>a.pressed{ text-shadow:#3d3d3d 0px -1px 1px;} ul#css3menu1 ._>li>a{ padding:0;} ul#css3menu1 li.subfirst>a{ border-width:0;border-style:none;padding:0;} ul#css3menu1 li.subfirst:hover>a,ul#css3menu1 li.subfirst>a.pressed{ border-style:none;}
Html Code:
</head> <body style="background-color:#EBEBEB"> <ul id="css3menu1" class="topmenu"> <li class="topfirst"><a href="http://protonicatv.blogspot.com" title="HOME" style="width:69px;"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACyklEQVR42q2TW0iTYRjH/9/37aRbnk9r6BKciolmiHiKRC8KoUwsA/NCMIjQG4swK40uioSKghK6kEnSjZGapDdmYibp1E1zmzp1zTkPO4mbblN3+JoKg5CCqOfy5ff8ngPvQ+Afg/ivAnm1oGFAzX1gsXKgN7hxhEmA5X1n0gB1ANMUQVy8oZhqPyTYqI/Mbxrk9ohyY9lHdzz41GUGj3SDTRKg9ijyAPa6VkgSGdcm5Ms+wUZDZGifgjE0xxYmlFXEwL5kh6zNCrNWD7Y/BW/CvsAXNNoqJfLLPoG8Kqq1VRlRXlGdCP/IALisDui/bkPZuwAG0wnK2wJB/jo7SaO07Iv8HaG9JagSD3NeZpYcR2q2ANtO0luRgG3egpkPq7DpdWBxGCCpvT3QoD00bA4PTDtkV41EWUQ0n40tH7eHxt97nF7jYXJ5JMXwYgQ8djvUH3UwyVRgUC643TTc3mQ7xw+u8LC574r18y9GZDP7I/S8Ludn5AiU5tX1oO1tF8KjhWD5kTBIVzDZMgqa5UQgnwNTcAy4/CDEC+iBlEvNeb4dLEluihhMv1GbSROoV03AzQyDMC0bPG4Ilr/JQHM8eG69gE5bJq77d6DqmHRIUPgm1ydYHasVkSz/Mdu6NsCikcJhdyEk8TQE8Sdg005hfcuBAvVDGJ08iPmvkLwzJqt8NJwuVWg8+wLtSK0oIDhAvmlQs0zzUqyu7UJ4Mg/CpDRs6qZhtNjwzFiC0jApSM34dKN4sn5q3tRuMpvpfcGT+yXs0IjouqwkRq1T18txOJwIEuWDH5cKi24WlMcC+6Zzt7VD1dTSvdio0S2vHfqJdbfv8nJysjp50BbQpn7EJsRAmJiCjaVZ9A2qhsXt6jvdn6X9f7yF4qJz7DhRcrHRaAi0mmf1V0pPXZXJVKNv30ue/tAubf31NRaeyY9STi+YNdpF5++Yn62qMCBYN60YAAAAAElFTkSuQmCC" alt="HOME"/>HOME</a></li> <li class="topmenu"><a href="http://protonicatv.blogspot.com" title="TAB MENU1" style="width:69px;"><span>TAB MENU1</span></a> <ul> <li class="subfirst"><a href="#" title="TAB MENU1 2">TAB MENU1 2</a></li> <li><a href="#" title="TAB MENU1 1">TAB MENU1 1</a></li> <li><a href="#" title="TAB MENU1 0">TAB MENU1 0</a></li> </ul> </li> <li class="topmenu"><a href="http://protonicatv.blogspot.com" title="TAB MENU 2" style="width:69px;"><span>TAB MENU 2</span></a> <ul> <li class="subfirst"><a href="#" title="TAB MENU 2 2">TAB MENU 2 2</a></li> <li><a href="#" title="TAB MENU 2 1">TAB MENU 2 1</a></li> <li><a href="#" title="TAB MENU 2 0"><span>TAB MENU 2 0</span></a> <ul> <li class="subfirst"><a href="#" title="TAB MENU 2 0 0">TAB MENU 2 0 0</a></li> </ul> </li> </ul> </li> <li class="topmenu"><a href="http://protonicatv.blogspot.com" title="TAB MENU3" style="width:69px;"><span>TAB MENU3</span></a> <ul> <li class="subfirst"><a href="#" title="TAB MENU3 2">TAB MENU3 2</a></li> <li><a href="#" title="TAB MENU3 1"><span>TAB MENU3 1</span></a> <ul> <li class="subfirst"><a href="#" title="TAB MENU3 1 0">TAB MENU3 1 0</a></li> </ul> </li> <li><a href="#" title="TAB MENU3 0"><span>TAB MENU3 0</span></a> <ul> <li class="subfirst"><a href="#" title="TAB MENU3 0 0">TAB MENU3 0 0</a></li> </ul> </li> </ul> </li> <li class="topmenu"><a href="http://protonicatv.blogspot.com" title="TAB MENU 4" style="width:69px;"><span>TAB MENU 4</span></a> <ul> <li class="subfirst"><a href="#" title="TAB MENU 4 2">TAB MENU 4 2</a></li> <li><a href="#" title="TAB MENU 4 1">TAB MENU 4 1</a></li> <li><a href="#" title="TAB MENU 4 0">TAB MENU 4 0</a></li> </ul> </li> <li class="topmenu"><a href="http://protonicatv.blogspot.com" title="TAB MENU 5" style="width:69px;"><span>TAB MENU 5</span></a> <ul> <li class="subfirst"><a href="#" title="Item 1 0">Item 1 0</a></li> <li><a href="#" title="Item 1 1">Item 1 1</a></li> <li><a href="#" title="Item 1 2">Item 1 2</a></li> </ul> </li> <li class="toplast"><a href="http://protonicatv.blogspot.com" target="_blank" title="PROFIL" style="width:69px;"><span><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACsElEQVR42oXTW0iTURwA8P932bf7Ur/NyTa10lgpolm5KQXLGCH4IpVEvVhWTKSHwixJDKsHsws9CCL4YAgWZWQY5iWMbqY+VBhdVHSmSXlLl7rtu52v44Pg0PQP53AO58+P/7kRsCJs0dEaiiRzRFHMRgjtw03gBaFxcWHhOs/zPlgjiJUT1hh5TSbIUlkGQLgjAYGCIoDjuNs+n69oQ6AsJ+UGbbIW8whAzVDQ3TcCrz6PgiQKH/1+f5osy+K6QN/dY/eTXHuPglINwPvhRdsb5C5+SDJKpl/guRQMBNcHqk92bk1J3o/PAQJ/fsOP0XFU0dBFNvWMtnPBYBZOQesC3ZWH2qNibG5AIl7A+6dpKK/rnKtp+ZKHl59ueAYdF1215uiofIpWgFKjhalfk/B17OeF/KreW/CfCAEeFTqdUSZDuzbMoJcIFYwPfgfKVfD6b1JexXE79XxD4MqDqp3pKnMz9a3J6p/wgk6jgMmMyxCWeADvKtA8Nsud86SxQ2sC559cZZ3b8t/FWiz22ZY7sKn/sUwkHyaCu05BhEELsoxgwscNDk9z2R4HO7AKuNRcX7Q7Nufm0MQsJMOIbKVn5C46ldRodRCpp4HVK4HCecMzXOvkgpBd4GClEKDs2duXi36za25+HrLiTTCvMoB32geSJAKJX+V2qx7izDrwCwgNTAX3eBzGDyHAmboeb4BXbpYFHhJZNQgGA4gSAgkhEER8/RjJsBshQsdAr3fudFGmrTYESC8pORKuOVitUCtYi4EBo8UIoiDhChCISAYOj1O3hENiTBg0dY3UVOTu8Ky6BceJewkqvaYwLiE212gKNy5VgJ8vRpYAEeLNWplEqO/T0HRl/VlnwypgOdylrTZGqUhlGNpOkmQm/pzxgiA2ipzQgYB431buDizn/gOvUyogeqRq+QAAAABJRU5ErkJggg==" alt="PROFIL"/>PROFIL</span></a> <ul> <li class="subfirst"><a href="http://protonicatv.blogspot.com" target="_blank" title="@ Email">@ Email</a></li> <li><a href="http://www.facebook.com" target="_blank" title="@ Facebook">@ Facebook</a></li> </ul> </li> </ul>
Bantuan : Cara Memasang Menu Di Blogger Template
Posted by at 2:20 AM
Labels: ,

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)

Followers

@2011 Protonica Tv Dan Computer created by Roso Prast Template Source: Blogger.Com.