Adding a Floating Drop Down Menu In Blogger With Search Box

A drop down menu is something that contains navigation URl's of your blog and making it easier to find the content users are looking for.
A floating element is something that sticks to your blog at the place you post it and scrolling doesn't affects it position.
Today I am sharing a drop down menu for blogger with search box.

Adding Floating DropDown menu to blogger

1. Login to your blogger dashboard.
2. Select your blog.
3. Select Template .
4. Click Edit HTML. 
5. Add this code just above the body tag

<style>

#naviopdropcont{

  width:100%;

  height:45px;

  display:block;

  padding:0;

  margin:0 0 20px 0;

 z-index:100;

  top:0px;

left:0px;

 position:fixed;

    box-shadow:2px 2px 5px  #444444;

-moz-box-box-shadow:2px 2px 5px  #444444;

-web-kit-box-shadow:2px 2px 5px  #444444;

-goog-ms-box-shadow:2px 2px 5px  #444444;

background:#000;

}

#naviopdropnav{

  float:left;

  width:800px;

  height:40px;

  display:block;

  padding:0;

  margin-left:40px;

}

#naviopdropnav ul{

  float:left;

  margin:0;

  padding:0;

}

#naviopdropnav li{

  float:left;

  list-style:none;

  line-height:40px;

  margin:0;

  padding:0

background:#180000;

}

#naviopdropnav li a, #naviopdropnav li a:link{

  color:#fff;

  display:block;

  margin:0;

font:16px georgia, verdana;

  padding:10px;

  text-decoration:none;

}

#naviopdropnav li a:hover, #naviopdropnav li a:active, #naviopdropnav .current_page_item a  {

  color:#fff;

  padding:10px;

background:#007acc;}

#naviopdropnav li li a, #naviopdropnav li li a:link, #naviopdropnav li li a:visited{

  font-size: 12px;

background:#180000;

  color: #fff;

  width: 150px;

  margin: 0;

  padding: 0px 10px;

  line-height:30px;

  position: relative;

}

#naviopdropnav li li a:hover, #naviopdropnav li li a:active {

  color: #fff;

background:#007acc;

}

#naviopdropnav li ul{

  z-index:9999;

  position:absolute;

  left:-999em;

  height:auto;

  width:170px;

  margin:0px;

  padding:0px

}

#naviopdropnav li:hover ul, #naviopdropnav li li:hover ul, #naviopdropnav li li li:hover ul, #naviopdropnav li.sfhover ul, #topnaviopdropnav li li.sfhover ul, #topnaviopdropnav li li li.sfhover ul{

  left:auto

}

#naviopdropnav li:hover, #naviopdropnav li.sfhover{

  position:static;

}

</style>

<style>.

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius: 2em;

-webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);

-moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);

box-shadow: 0 1px 0px rgba(0,0,0,.1);

background: #f1f1f1;

background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));

background: -moz-linear-gradient(top, #fff, #ededed);

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */

-ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */

}

.searchform input {

font: normal 12px/100% Arial, Helvetica, sans-serif;

}

.searchform .searchfield {

background: #fff;

padding: 6px 6px 6px 8px;

width: 202px;

border: solid 1px #bcbbbb;

outline: none;

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius: 2em;

-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

box-shadow: inset 0 1px 2px rgba(0,0,0,.2);

}

.searchform .searchbutton {

color: #fff;

border: solid 1px #000;

font-size: 11px;

height: 30px;

width: 30px;

text-shadow: 0 1px 1px rgba(0,0,0,.6);

-webkit-border-radius: 2em;

-moz-border-radius: 2em;

border-radius: 2em;

cursor:pointer;

background: #007acc;

}

</style>

  <div id='naviopdropcont'>

     <div id='naviopdropnav'>

         <ul>

           <li><a href=''>Home</a></li>

           <li><a href='#'>About us</a></li>    

           

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

               <ul>

                  <li><a href='#'>Item 1</a></li>

                  <li><a href='#'>Item 2</a></li>

                  <li><a href='#'>Item 3</a></li>

                  <li><a href='#'>Item 4</a></li>

                  

               </ul>

           </li>

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

              

             <ul>

                  <li><a href='#'>Category 1</a></li>

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

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

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

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

                  <li><a href='#'>drop down</a></li>

               </ul>

           </li>

             <li><a href='#'>Contact us</a>           

           </li>

<li style='float:right;padding:0px 0px ;margin:5px 18px 11px 40px;

  '><form class="searchform" action="/search" method="get">

<input name="q" class="searchfield" type="text" value="Search..." onfocus="if (this.value == 'Search...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search...';}" />

<input class="searchbutton" type="submit" value="Go" />

</form></li>

         </ul>

      </div>

     

Now click save and you are done.
You have just added a sticky drop down menu for blogger.
Leave your comments and suggestions.