Creating A Dropdown Search Bar For The NavBar
<p>I would like help in coding a dropdown search bar that appears on my hovering navigation bar. An example of such an element can be viewed on the following blog - <a href="http://www.theprivatelifeofagirl.com/" rel="nofollow">http://www.theprivatelifeofagirl.com/</a> - in the top right hand side corner of the navbar.</p>

<p>I have a search bar already coded in my own navbar however I would like for only the small "search icon" to be visible and for the reader to be able to click the icon and for a search bar to drop down, in which the reader would then be able to type of they're searching for. I have included the relevant html and css coding for the search bar below :</p>

<pre><code>&lt;style&gt;
#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;
}
&lt;/style&gt;

&lt;div class='searchborder'&gt;
&lt;div id='search' title='Type and hit enter'&gt;
&lt;form action='/search' id='searchform' method='get'&gt;
&lt;input id='s' name='q' onblur='if (this.value == &amp;quot;&amp;quot;)    {this.value = &amp;quot;Search&amp;quot;;}' onfocus='if (this.value == &amp;quot;Search&amp;quot;) {this.value = &amp;quot;&amp;quot;;}' type='text' value='Search'/&gt;
 &lt;/form&gt;
&lt;/div&gt;
&lt;br/&gt;
&lt;br/&gt;
   &lt;/div&gt;
</code></pre>

<p>Any input in this matter would be greatly appreciated. The URL to my blog is as follows : <a href="http://www.blankesque.com" rel="nofollow">http://www.blankesque.com</a></p>