Membuat Menu Horizontal Drop Down

Membuat Menu Horizontal Drop Down




<style type="text/css">

#black{background:-webkit-gradient(linear, left top, left bottom,
from(#4B0082), to(#FF0000)); width:930px; height:32px; color:#5A6C8C;
margin:0 auto; padding:0 5px; font:bold 8px Arial, Tahoma, Verdana;
border-top:1px solid #666; border-bottom:1px solid #666;-moz-box-shadow:
1px 1px 10px #888;

-webkit-box-shadow:1px 1px 10px #888;

-webkit-border-radius: 6px;

-moz-border-radius: 6px;border-left:1px solid #333}

#NavbarMenuleft{width:700px; float:left; margin:0; padding:0;}

#search{width:240px; font-size:11px; float:right; margin:0; padding:0;}

#nav{margin:0; padding:0;}

#nav ul{float:left; list-style:none; margin:0; padding:0;}

#nav li{border-left:1px solid #ff0000;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:#4a4d4c; color:#fff; padding:9px 15px 9px; text-decoration:none;}

#nav li li a, #nav li li a:link, #nav li li
a:visited{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtBKWIqjb3xTUX-pPeMomdDg1h9aHWb06dfPMy4_pyS3R6P8vmDp6KCC7LkI5ODGJsbelMf3-rK-mfecrcd4q9AxaSiK61Szc9Q6ODaVZkhAxjiAwtWNf7MPsA8LITcHrrthudEXHHgt_l/);
width:150px; color:#e5e3e3; text-transform:capitalize; float:none;
margin:0; padding:3px 10px; border-bottom:1px solid #151f23;
border-left:px solid #151f23; border-right:2px solid #151f23;
font:normal 14px Georgia, Times New Roman;-moz-box-shadow: 1px 1px 10px
#888;

-webkit-box-shadow:1px 1px 10px #888;

-webkit-border-radius: 6px;}

#nav li li a:hover, #nav li li a:active{background:#4a4d4c; color:#fff; padding:3px 10px;}

#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;}

#searchbox{padding:0; margin:0;}

#search input{background:#fff; color:#000; float:left ;margin:5px 0 0
10px; width:168px; padding:3px 7px; border:1px solid #cdcdcd;
font:normal 11px arial, verdana, Times New Roman;}

#search .btn{background:#333; color:#fff; font-size:11px; margin:5px 0 0
3px; padding:2px; width:30px; cursor:pointer; border-left:1px solid
#666; border-top:1px solid #666; border-right:2px solid #111;
border-bottom:2px solid #111;}

#top{background:#f6f6f6; margin:10px auto 0; padding:10px; width:918px;
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:1px 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://blazerracing.blogspot.com/'>Home</a></li>



<li><a href='#'>Tutorial</a>



<ul>



<li><a href='http://blazerracing.blogspot.com/2011/12/tutorial-blog.html'>Tutorial Blogspot</a></li>



<li><a href='http://blazerracing.blogspot.com/search/label/point%20blank?&max-results=5'>Tutorial Point Blank</a></li>



</ul></li>



<li><a href='#'>Tips</a>



<ul>



<li><a href='http://blazerracing.blogspot.com/2011/12/tips-blog.html'>Tips Blogspot</a></li>



<li><a href='http://tokoone.com/script-toko-online-instan-siap-pakai-55-fitur-lengkap/?affid=10634?&max-results=5'>scrript toko online</a></li>



<li><a href='http://wong-lendah.blogspot.com/2014/11/cara-membuat-dan-kirim-email-html.html?&max-results=5'>cara membuat email</a></li>

</ul></li>



<li><a href='#'>Download Icon</a>



<ul>



<li><a href='http://blazerracing.blogspot.com/2012/02/download-social-network-icon.html'>Social Network Icon</a></li>



</ul></li>



<li><a href='#'>Tool</a>



<ul>



<li><a href="http://tokoone.com/sensor-parkir-mobil/?affid=10634">Sensor Parkir Mobil - Cegah Resiko Menabrak Saat Parkir</a></li>


</ul>

</div>

<div id='search'>

<form action='/search/' id='searchform' method='get' style='display:inline;'>

<input id='searchbox' maxlength='200' name='q' onblur='if (this.value
== "") {this.value = "Search...";}' onfocus='if (this.value ==
"Search...") {this.value = ""}' type='text' value='search...'/>

<input class='btn' type='submit' value='go'/>

</form>

</div></div>

</div>

Comments

Post a Comment