Smooth horizontal CSS Menu with Blog Search engine

Hey friend today i have brought you a  smooth CSS menu which includes a cool Search engine.Click here for demo.

CSS code:

<style type="text/css">

#nav {
    width:900px;
    height:34px;
    background: url(http://img524.imageshack.us/img524/8224/menutn6.png) repeat-x;
    margin:0 auto; padding:0; 
font-family: Arial, Georgia, Sans-serif;
    overflow:hidden;
}

#menu {
 float:left;
 width: 580px;
 height:34px;
}

#menu ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
}

#menu ul li {
 float: left;
}

#menu ul li a {
 display: block;
 text-align: center;
 font-weight: bold;
 font-size: 14px;
 padding: 10px 10px 10px 10px;
 color: #333;
}

#menu ul li a:hover, #menu ul li a.active {
 text-align: center;
 font-weight: bold;
 font-size: 14px;
 background: #ccc;
text-decoration:none
}

#search_box {
 float: right;
 width:200px;
 height:34px;
 
}

#search_box #searchform {
 margin: 0 0;
 padding: 0 0;
 height:34px;
}

#search_box #searchform .search_button {
 margin: 0 0 0 5px;
 padding: 0 0;
 border:0;
 width:28px;
 height:34px;
 background: url(http://img368.imageshack.us/img368/2286/searchwz8.png) no-repeat;
 cursor:pointer;
}

#search_box #searchform #s {
margin-top: 6px;
padding: 0;
vertical-align:top;
} 
</style>

HTML Code:

<div id='nav'>
 <div id='menu'>

  <ul>
   <li><a href='http://bloganol.blogspot.com/' title='Link 1 Title'>Link 1</a></li>
   <li><a href='http://bloganol.blogspot.com' title='Link 2 Title'>Link 2</a></li>
   <li><a href='http://bloganol.blogspot.com' title='Link 3 Title'>Link 3</a></li>
   <li><a href='http://bloganol.blogspot.com' title='Link 4 Title'>Link 4</a></li>
   <li><a href='http://bloganol.blogspot.com' title='Link 5 Title'>Link 5</a></li>
  </ul>
 </div>

 <div id='search_box'>
  <form action='/search/' id='searchform' method='get'>
  <input id='s' name='s' type='text'/><input class='search_button' id='searchsubmit' type='submit' value=''/></form>
 </div>

</div>