Add 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.