Add drop down menu in blog

Adding drop down menus in blogger can benefit your readers to find out the intended posts of the blog with ease. To add drop down menu in blogger you need is just a little bit of CSS and HTML code

1. HTML

Click on Add a Gadget > HTML/JavaScript link and insert the following type of code

<div id="navigation">

  <ul>

    <li><a href="#">Home</a></li>

    <li><a href="#">About</a></li>

    <li><a href="#">Services</a>

      <ul>

        <li><a href="#">Web design</a></li>

        <li><a href="#">Wordpress</a></li>

      </ul>

     </li>

    <li><a href="#">Contact</a></li>

  </ul>

</navigation>

2. CSS

                Now Navigate to Design > Edit HTML Section. Find this type of code ]]></b:skin> and put this code before it

div#navigation{

    background: #444444; /* Old browsers */

    border-radius: 4px;

}

#navigation ul, #navigation li{ list-style:none; padding:0; margin:0; display:inline; }

#navigation ul li{ float:left; position:relative; }

#navigation ul li a{

    display:block;

    padding:8px 12px;

    margin:1px;

    font-size:18px;

    white-space:nowrap;

    border-radius:3px;

}

#navigation ul li a:hover{ background:#222;}

#navigation ul ul{

    position:absolute;

    top:-99999px;

    left:0;

    opacity: 0; /* Hide sub level */

    -webkit-transition: opacity .5s ease-in-out;

    -moz-transition: opacity .5s ease-in-out;

    -o-transition: opacity .5s ease-in-out;

    z-index:497;

    background:#333;

    padding: 2px;

    border:1px solid #444;

    border-top:none;

    box-shadow:#111 0 3px 4px;

    border-bottom-left-radius:6px;

    border-bottom-right-radius:6px;

}

#navigation ul ul ul {

    position:absolute;

    top:-99999px;

    left:100%;

    opacity: 0;

    -webkit-transition: opacity .5s ease-in-out; /* Hide sub levels */

    -moz-transition: opacity .5s ease-in-out;

    -o-transition: opacity .5s ease-in-out;

    border-radius:6px;

    border:1px solid #444;

}

#navigation ul li:hover>ul{ opacity: 1; position:absolute; top:99%; left:0; }

#navigation ul ul li:hover>ul{ position:absolute; top:0; left:100%; opacity: 1; z-index:497; background:#333; }

3. Save template and done