|
|
Ass....terkadang untuk membuat blog, kita bertanya-tanya bagaimana cara membuat dropdown menu horizontal agar blog kita kelihatan lebih cantik dan propesional. Tanpa panjang lebar bla..bla..bla..langsung saja ke intinya.
Silahkan kopas saja Kode HTML di bawah ke blog anda atau terlebih dahulu anda EDIT motif dan warna Dropdown menu menurut kesukaan anda di bagian atas (EDIT HTML)
<style type="text/css">
#black{background:#006B6B; width:auto; height:30px; color:#8196a4; margin:0 auto; padding:0 2px; font:bold 10px Arial, Tahoma, Verdana; border-top:1px solid #8196a4; border-bottom:1px solid #8196a4;-moz-box-shadow:""; -webkit-border-radius:""; -moz-border-radius: 0px;border-left:0px solid #333}
#NavbarMenuleft{width:100%; float:left; margin:0; padding:0;} #nav{margin:0; padding:0;} #nav ul{float:left; list-style:none; margin:0; padding:0;} #nav li{border-left:0px solid #073763;list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;} #nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;} #nav li a:hover, #nav li a:active{background:#4a9d9c; color:#fff; padding:5px 15px 9px; text-decoration:none;} #nav li li a, #nav li li a:link, #nav li li a:visited{background:#073770; width:150px; color:#8196a4; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #c1e1f6; border-left:0px solid #151f23; border-right:0px solid #151f23; font:normal 14px Georgia, Times New Roman;-moz-box-shadow: 1px 1px 1px #888; -webkit-border-radius: 0px;} #nav li li a:hover, #nav li li a:active{background:#006B6B; color:#fff; padding:3px 12px;} #nav li{float:left; padding:0;} #nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;} #nav li ul a{width:140px;} #nav li ul ul{margin:-24px 0 0 170px;} #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;} #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto;} #nav li:hover, #nav li.sfhover{position:static;}
#top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:100%; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;} #top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;} #top a:hover{color:#cc0000; text-decoration: underline;} #top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;} .topleft {width: 304px; float: left; margin: 0; padding:0;} .topleft img a, .topleft img {border:0 solid #ccc; margin: 0; padding: 1px;} .topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;} </style> <div id='outer'> <div id='black'> <div id='navbarmenuleft'> <ul id='nav'>
<li><a href='http://winholisin.blogspot.co.id/'>Beranda</a></li>
<li><a href='#'>Title 1</a> <ul>
<li><a href='Url anda'>Sub Title 1</a></li>
<li><a href='Url anda'>Sub Title 2</a></li>
<li><a href='Url anda'>Sub Title 3</a></li>
<li><a href='Url anda'>Sub Title 4</a></li>
<li><a href='Url anda'>Sub Title 4</a></li> </ul> </li>
<li><a href='#'>Title 2</a> <ul>
<li><a href='Url anda'>Sub Title 2-1</a></li>
<li><a href='Url anda'>Sub Title 2-2</a><ul></ul> <ul>
<li><a href='Url anda'>Sub Title 2-2-1</a></li>
<li><a href='Url anda'>Sub Title 2-2-2</a></li>
<li><a href='Url anda'>Sub Title 2-2-3</a></li>
<li><a href='Url anda'>Sub Title 2-2-4</a></li>
<li><a href='Url anda'>Sub Title 2-2-5</a></li>
<li><a href='Url anda'>Sub Title 2-2-6</a></li>
<li><a href='Url anda'>Sub Title 2-2-7</a></li> </ul> </li>
<li><a href='Url anda'>Sub Title 3</a></li>
<li><a href='Url anda'>Sub Title 4</a></li>
<li><a href='Url anda'>Sub Title 5</a></li> </ul>
<li><a href='#'>Title 3</a> <ul>
<li><a href='Url anda'>Sub Title 1</a></li>
<li><a href='Url anda'>Sub Title 2</a></li>
<li><a href='Url anda'>Sub Title 3</a></li>
<li><a href='Url anda'>Sub Title 4</a></li>
<li><a href='Url anda'>Sub Title 5</a></li>
</ul> </li></li></li></ul> </div></div>
#black{background:#006B6B; width:auto; height:30px; color:#8196a4; margin:0 auto; padding:0 2px; font:bold 10px Arial, Tahoma, Verdana; border-top:1px solid #8196a4; border-bottom:1px solid #8196a4;-moz-box-shadow:""; -webkit-border-radius:""; -moz-border-radius: 0px;border-left:0px solid #333}
#NavbarMenuleft{width:100%; float:left; margin:0; padding:0;} #nav{margin:0; padding:0;} #nav ul{float:left; list-style:none; margin:0; padding:0;} #nav li{border-left:0px solid #073763;list-style:none; margin:0; padding:0; text-shadow:1px 1px 1px #000;} #nav li a, #nav li a:link, #nav li a:visited{color:#fff; display:block; text-transform:uppercase; margin:0; padding:9px 15px 9px; font:bold 11px Arial, Times New Roman;} #nav li a:hover, #nav li a:active{background:#4a9d9c; color:#fff; padding:5px 15px 9px; text-decoration:none;} #nav li li a, #nav li li a:link, #nav li li a:visited{background:#073770; width:150px; color:#8196a4; text-transform:capitalize; float:none; margin:0; padding:3px 10px; border-bottom:1px solid #c1e1f6; border-left:0px solid #151f23; border-right:0px solid #151f23; font:normal 14px Georgia, Times New Roman;-moz-box-shadow: 1px 1px 1px #888; -webkit-border-radius: 0px;} #nav li li a:hover, #nav li li a:active{background:#006B6B; color:#fff; padding:3px 12px;} #nav li{float:left; padding:0;} #nav li ul{z-index:9999; position:absolute; left:-999em; height:auto; width:170px; margin:0; padding:0;} #nav li ul a{width:140px;} #nav li ul ul{margin:-24px 0 0 170px;} #nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul{left:-999em;} #nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul{left:auto;} #nav li:hover, #nav li.sfhover{position:static;}
#top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:100%; border:1px solid #ccc; word-wrap: break-word; overflow: hidden; font-size:13px;} #top a, #top a:visited{font-weight: normal; color: #00338F; text-decoration: none;} #top a:hover{color:#cc0000; text-decoration: underline;} #top p {font-size: 14px; font-weight: bold; padding: 0; margin: 0;} .topleft {width: 304px; float: left; margin: 0; padding:0;} .topleft img a, .topleft img {border:0 solid #ccc; margin: 0; padding: 1px;} .topright {width: 600px; float: right; margin:0; padding:0; text-transform: normal;} </style> <div id='outer'> <div id='black'> <div id='navbarmenuleft'> <ul id='nav'>
<li><a href='http://winholisin.blogspot.co.id/'>Beranda</a></li>
<li><a href='#'>Title 1</a> <ul>
<li><a href='Url anda'>Sub Title 1</a></li>
<li><a href='Url anda'>Sub Title 2</a></li>
<li><a href='Url anda'>Sub Title 3</a></li>
<li><a href='Url anda'>Sub Title 4</a></li>
<li><a href='Url anda'>Sub Title 4</a></li> </ul> </li>
<li><a href='#'>Title 2</a> <ul>
<li><a href='Url anda'>Sub Title 2-1</a></li>
<li><a href='Url anda'>Sub Title 2-2</a><ul></ul> <ul>
<li><a href='Url anda'>Sub Title 2-2-1</a></li>
<li><a href='Url anda'>Sub Title 2-2-2</a></li>
<li><a href='Url anda'>Sub Title 2-2-3</a></li>
<li><a href='Url anda'>Sub Title 2-2-4</a></li>
<li><a href='Url anda'>Sub Title 2-2-5</a></li>
<li><a href='Url anda'>Sub Title 2-2-6</a></li>
<li><a href='Url anda'>Sub Title 2-2-7</a></li> </ul> </li>
<li><a href='Url anda'>Sub Title 3</a></li>
<li><a href='Url anda'>Sub Title 4</a></li>
<li><a href='Url anda'>Sub Title 5</a></li> </ul>
<li><a href='#'>Title 3</a> <ul>
<li><a href='Url anda'>Sub Title 1</a></li>
<li><a href='Url anda'>Sub Title 2</a></li>
<li><a href='Url anda'>Sub Title 3</a></li>
<li><a href='Url anda'>Sub Title 4</a></li>
<li><a href='Url anda'>Sub Title 5</a></li>
</ul> </li></li></li></ul> </div></div>
