Adding Drop Down Menu to Your Blog

Many of the bloggers  finds difficulty to manage their Navigation Menus because of  numerous labels and links. Due to which their blog looks dull and messed. Beside this the blog readers also finds difficulty to find the required labels and links.

So in this post I am going to introduce a Multi –Level Drop Down menus for blog which will help you to manage numerous labels and links. Besides this it makes your site/Blog more users friendly and gives it more professional look. In addition it takes very less space to manage multiple link .You can view the demo of this Multi-Level Drop Down menu in mine blog. Follow the given instruction to install multi-level drop down menu in your blog:

1.   Sign in to blogger
2.   Go to design>Edit HTML
3.   Find the given tag (press ctrl + F to open the find box and copy the code to find box for quick finding)
               ]]></b:skin>
4.Above that code copy the given code

#nav{
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
#nav, #nav ul{
    background:#333333;
    height:35px;
    list-style:none;
    margin:0;
    padding:0;
    }
#nav a {
    display: block;
 
}
#nav li{
float:left;
padding:0px;
}
#nav li a{
background:#333333 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXt8nV-VAWXou-bC9SE2Hf6m5eCNTnOwl9p-pQ9sisoEXHT9VGNzvL6haIVM4WI_DER6bOAFIP38C0816oztmESMzqD0uAg0H1OP5aAFcvwjsnJPxmxpJI9EgZiPZUYOL6B8GNEIQVJres/s1600/seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
#nav li a:link, #nav li a:visited {
color:#FFFFFF;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 15px Georgia, Times New Roman;
}
#nav li a:hover, #nav li a:active {
background: #2580a2 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHGtRcF7JCWYXRn8lcMguyVL4mW883pFgpKcVUSUkT6P4xPKlmECEPlEB1l0hEf5ZKKiyzRECUwmIt_jxJx87mkhyS9ogBxIXV_RJTHlEln7JUW6NVbpoKn72ecWfTyCil-mwYXdYabuZL/s1600/hover.gif") bottom center no-repeat;
color: #fff;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiSaFc4hsNQofxYL_7YQHHs6X1R2d27kjsRkKjRTyDEi4cCAfHZSRXPK60UoQLcBs7JfsjdSnNw52owZclYu-15nnl6dX1FnnHoA4pIvAOV4BsZpbMNNWKJgrwt9qjkSLDXQhBgvgR8nQ0i/s1600/sub_sep.gif') bottom left no-repeat;
color: #fff;
width: 205px;
text-transform: Titlecase;
float: none;
margin: 0;
padding: 7px 10px;
font: normal 14px Georgia, Times New Roman;
}
#nav li li a:hover, #nav li li a:active {
background:#2580a2 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgZ9YHFOgaLNWRXYvMDIZNUBz-yIYCnKm7Af2bE3_ZHLzLr91olWCheGPkWqrC-U-uMuS_NPazWCGI__NY2AYLQJX5rxCm7qWesFmYx_FmEh9B4dqIfX5J1gfUzqWCJUp8vnPLU2I7qX8ut/s1600/hover_sub.gif') center left no-repeat;
color: #fff;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
background:#333333;
z-index:200;
position: absolute;
left: -999em;
height: auto;
width:225px;
margin: 0;
padding: 0;
border:0px;
}
#nav li ul a {
width: 225px;
display:block;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}
#nav p{
clear:left;
}

 5.Save your template Go to design

    ·       Click on  Page Elements

    ·       Then  Add a gadget and choose HTML/java script
6.Copy and Paste the given code(Edit the link portion )

<div id='nav'>
        <ul>
            <li class='selected'><a href='/'>Home</a></li>
            <li><a href='#' id='current'>Health Section</a>
                <ul>
                    <li><a href=' http://picturefullfun.blogspot.com/search/label/Health Tips'>Health Tips</a></li>
                    <li><a href=' http://picturefullfun.blogspot.com/search/label/Herbs '>Herbs Found In Nepal</a></li>
                     </ul>
                     </li>
<li><a href='#'>IT News</a> 
<ul>         
                    
                     <li><a href=' http://picturefullfun.blogspot.com/search/label/it news'>IT News</a></li>
                     </ul>
                     </li>              
         
    <li><a href='#' id='current'>Entertainment Section</a>
                <ul>
                    <li><a href='http://picturefullfun.blogspot.com/search/label/Music Videos'>Watch Music Videos</a></li>
                    <li><a href='http://picturefullfun.blogspot.com/search/label/quotes'>Quotes</a></li>
<li><a href='http://picturefullfun.blogspot.com/search/label/jokes'>Jokes</a></li>                                     
               </ul>
          </li>
<li><a href='#'>About Disease</a>
                <ul>
                <li><a href='http://picturefullfun.blogspot.com/search/label/Disease'>Health Problem</a></li>
                             
                </ul>
          </li>
  <li><a href=' http://picturefullfun.blogspot.com/search/label/Policy '>Privacy Policy</a></li>
<li><a href=' http://picturefullfun.blogspot.com/search/label/us '>Contact Us</a></li>
         

        </ul>
    </div>

 7.    Go to design>Edit HTMl

    ·       Find </head> tag (press ctrl + F to open the find box and copy the code to find box for quick finding)

        
8.Copy the given Code Before above tag

<!--[if lte IE 7]>

<script type='text/javascript'>

//<![CDATA[

sfHover = function() {

var sfEls = document.getElementById("Nav").getElementsByTagName("LI");

for (var i=0; i<sfEls.length; i++) {

sfEls[i].onmouseover=function() {

this.className+=" sfhover"; }

sfEls[i].onmouseout=function() {

this.className=this.className.replace(new RegExp(" sfhover\\b"), "");

}

}

}

if (window.attachEvent) window.attachEvent("onload", sfHover);

//]]>

</script>

<![endif]-->

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js' type='text/javascript'/>

This above drop down is supported by all the modern browsers like:-Opera,Google Chrome,Mozilla firefox etc and even the browsers having compatibility problem like:- Internet Exporer-7 as well as Internet Explorer-6.