html - Creating A Dropdown Search Bar For The NavBar -

i in coding dropdown search bar appears on hovering navigation bar. example of such element can viewed on following blog - http://www.theprivatelifeofagirl.com/ - in top right hand side corner of navbar.

i have search bar coded in own navbar small "search icon" visible , reader able click icon , search bar drop down, in reader able type of they're searching for. have included relevant html , css coding search bar below :

<style> #search {    text-align: left;    margin-right: -7%;    width: 100%;    float: right;    max-width: 210px;    border: 0;  }  #searchform {    height: 20px;  }  #search #s {    background: #f5f5f5 url(http://i1379.photobucket.com/albums/ah140/mynamesiram/mobile%20uploads/829c0943-c2a2-4052-bff5-49e6606f44b6_zps3r9lpyvb.gif)98% 50% no-repeat;    color: #494949;    background-size: 15px;    font-size: 10.5px!important;    font-family: karla, arial;    text-transform: uppercase;    text-decoration: none;    font-weight: normal;    letter-spacing: 0.09em;    border: 0;    width: 60%;    padding: 0;    margin: 0;    outline: none;    position: relative;    top: 18px;    padding-left: 6px;  } .searchborder { border-left: 1px solid #f0f0f0; position: absolute; margin: 0; right: 10px; bottom: 0px; height: 50px; } </style>  <div class='searchborder'> <div id='search' title='type , hit enter'> <form action='/search' id='searchform' method='get'> <input id='s' name='q' onblur='if (this.value == &quot;&quot;)    {this.value = &quot;search&quot;;}' onfocus='if (this.value == &quot;search&quot;) {this.value = &quot;&quot;;}' type='text' value='search'/>  </form> </div> <br/> <br/>    </div> 

any input in matter appreciated. url blog follows : http://www.blankesque.com

<script type='text/javascript'>//<![cdata[ jquery(document).ready(function($) { "use strict"; $('#top-search a').on('click', function(e) {     e.preventdefault();     $('.show-search').slidetoggle('fast'); }); }); //]]></script>  <div id='top-search'> <a href='#'><i class='fa fa-search'></i></a> </div> <div class='show-search'> <form action='/search' id='searchform' method='get' role='search'> <div> <input id='s' name='q' placeholder='search , hit enter...' type='text'/> </div> </form> 

this used in website showed.

edit:

jsfiddle

it's not same on website, it's working , can style , change work website :).