<script src="jquery-1.9.1.min.js"></script>
<script>
$(function() {
// menentukan objek yang dijadikan menu melayang yaitu #topNav
var float_nav_offset_top = $('#topNav').offset().top;
var float_nav = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
// kondisi jika halaman di scroll maka menu melayang diletakkan di posisi atas
if (scroll_top > float_nav_offset_top) {
$('#topNav').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#topNav').css({ 'position': 'relative' });
}
};
// menjalankan fungsi
float_nav();
$(window).scroll(function() {
float_nav();
});
});
</script>
#nav {
width: 920px;
height: 38px;
background: #33CCCC;
border-radius: 2px;
float: center;
margin: 0px auto;
}
#nav-left {
position : relative;
float: left;
width: 720px;
padding: 0 0 2px 2px;
}
#nav-right {
float: right;
width: 170px;
padding-top: 8px;
padding-right: 18px
}
#nav ul {
float: left;
margin: 0;
padding:0;
}
#nav li {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link {
float: left;
padding: 12px 10px;
color: #fff;
position: relative;
font-weight: bold !important;
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
}
#nav li a:hover, #nav li a:active, #nav .current_page_item a {
text-decoration: none;
background: #009999;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
font-size: 12px;
background: #33CCCC;
color: #fff;
text-decoration: none;
width: 150px;
padding: 0px 10px;
line-height: 35px;
}
#nav li li a:hover, #nav li li a:active {
background: #009999;
}
#nav li ul {
z-index: 999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin-top: 37px;
border: 1px solid #009999;
border-radius: 0px 0px 8px 8px;
}
#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;
}
#search {
border: 1px solid #222;
height: 20px;
width: 180px;
background: #f6f4f4;
}
#search input {
color: #777;
border: none;
}
#s-m {
font-size: 11px;
width: 180px;
padding-left: 4px;
padding-top: 5px;
margin: 0;
}
#search-t #search {
background-color: #FFFFFF;
border: 1px solid #222;
border-radius: 4px 4px 4px 4px;
-moz-border-radius: 4px 4px 4px 4px;
-khtml-border-radius: 4px 4px 4px 4px;
-webkit-border-radius: 4px 4px 4px 4px;
}
#search-t #s-m {
width: 155px;
padding-top: 3px;
}
<div id='nav'>
<div id=''>
<ul>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 1</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 2</a></li>
<!-- Contoh Membuat Menu DropDown -->
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 3</a>
<ul>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Sub menu 1</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Sub menu 2</a></li>
</ul>
<!-- Contoh Membuat Menu DropDown -->
</li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 4</a></li>
<li><a href='http://URL-YANG-DI-TUJU.blogspot.com/'>Menu 5</a></li>
</ul>
</div>
<div id='nav-right'>
<div id='search-t'>
<div id='search'>
<form action='/search' method='search' target='_blank'>
<input class='keyword' id='s-m' name='q' placeholder='Search...' onblur='if (this.value == "") {this.value = "Search..";}' onfocus='if (this.value == "Search..") {this.value = ""}' type='text' value=''/>
<input src='https://sites.google.com/site/adsroexis/search-c.png' style='border: 0pt none ;vertical-align: top; padding-top:4px; padding-right:3px;' type='image'/>
</form>
</div>
</div>
</div>
</div>
