How To Add Drop Down Navigation Menu In Blogger

Before, I distributed a device by which bloggers can check and correct the grammatical errors in their items and Today I'm going to share the easy drop down navigation menu for blogger. This is important for every blogger to make the navigation simpler of their blogs due to some reasons and drop down navigation menu is an perfect thing for it. In these kind of meal lists, when somebody hovers the mouse cursor on any exact category then it drops some sub categories of it in the upright method. And due to this effect, it is known as best list style. Well, before installing this in your blog first let me notify you something about this.
Drop Down Navigation Menu.
Read More:You Can Also Love This Widgets
This is the easy fall down navigation list which is constructed with pure HTML, CSS3 and JQuery. It has a gray hue because it is client amicable and it will not sway the tourists' eyes. You understand some heavy colors like Purple, Blue and Orange affect the tourists' eyes and most world wide world wide web designers use lightweight colors. So this list shows the upright sub classes when you'll place the mouse on any fall down list. It furthermore has a aim or click effect.

Read More:You Can Also Love This Widgets

Installation of Drop Down Navigation Menu

Yeah! It is simply easy. So, follow the below given steps and add it.
1.Go To Blogger >> Layout >> Add a Gadget (In The Header Area)
2.Choose "HTML/JavaScript"
3.Paste The Following Code In The Content Box

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">

</script>

<script type="text/javascript">

  $(function() {

    //We initially hide the all dropdown menus

    $('#dropdown_nav li').find('.sub_nav').hide();

  

    //When hovering over the main nav link we find the dropdown menu to the corresponding link.

    $('#dropdown_nav li').hover(function() {

      //Find a child of 'this' with a class of .sub_nav and make the beauty fadeIn.

      $(this).find('.sub_nav').fadeIn(100);

    }

                                , function() {

                                  //Do the same again, only fadeOut this time.

                                  $(this).find('.sub_nav').fadeOut(50);

                                }

                               );

  }

   );

</script>

<style>

  #dropdown_nav a {

 font-family:Arial, Sans-Serif;

        font-size:15px;

        font-weight:bold;

        color:#525252;

        text-decoration:none;

      }

      #dropdown_nav {

        width:960px;

        padding:0px;

        display:inline-block;

        list-style:none;

        -moz-box-shadow:inset 0px 0px 1px #fff;

        -webkit-box-shadow:inset 0px 0px 1px #fff;

        border:1px solid #ccc;

        -moz-border-radius:5px;

        -webkit-border-radius:5px;

        background:#e2e2e2;

        background:-moz-linear-gradient(#f3f3f3, #e2e2e2);

        background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));

      }

    

      #dropdown_nav li {

  padding:10px 0px 10px 0px;

  float:left;

  position:relative;

  display:inline-block;

      }

    

      #dropdown_nav li a {

        padding:10px 15px 10px 15px;

        text-shadow:-1px 1px 0px #f6f6f6;

        -moz-box-shadow:inset 0px 0px 1px #fff;

        -webkit-box-shadow:inset 0px 0px 1px #fff;

        border-right:1px solid #ccc;

      }

      #dropdown_nav li a:hover {

        background:#f9f9f9;

        background:-moz-linear-gradient(#f9f9f9, #e8e8e8);

        background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8));

      }

      #dropdown_nav li a:active {

        background:#e2e2e2;

        background:-moz-linear-gradient(#e2e2e2, #f3f3f3);

        background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3));

      }

    

      #dropdown_nav li a.first {

        -moz-border-radius:5px 0px 0px 5px;

        -webkit-border-radius:5px 0px 0px 5px;

      }

      /*#dropdown_nav li a.last {

      -moz-border-radius:0px 5px 5px 0px;

      -webkit-border-radius:0px 5px 5px 0px;

    }

      */

    

      /* Sub-Nav styling */

      #dropdown_nav .sub_nav {

        width:160px;

        padding:0px;

        position:absolute;

        top:38px;

        left:0px;

        border:1px solid #ccc;

        background:#e2e2e2;

      }

    

      #dropdown_nav .sub_nav li {

        width:160px;

        padding:0px;

      }

    

      #dropdown_nav .sub_nav li a {

        display:block;

        border-bottom:1px solid #ccc;

        background:-moz-linear-gradient(#f3f3f3, #e2e2e2);

        background:-webkit-gradient(linear, 0 0, 0 100%, from(#f3f3f3), to(#e2e2e2));

      }

      #dropdown_nav .sub_nav li a:hover {

        background:#f9f9f9;

        background:-moz-linear-gradient(#f9f9f9, #e8e8e8);

        background:-webkit-gradient(linear, 0 0, 0 100%, from(#f9f9f9), to(#e8e8e8));

      }

      #dropdown_nav .sub_nav li a:active {

        background:#e2e2e2;

        background:-moz-linear-gradient(#e2e2e2, #f3f3f3);

        background:-webkit-gradient(linear, 0 0, 0 100%, from(#e2e2e2), to(#f3f3f3));

      }

</style>

<!-- Navigation Start -->

<ul id="dropdown_nav">

  <li><a class="first" href="http://www.bloggertrick4you.blogspot.com/">Home</a></li>

  <li><a href="http://www.bloggertrick4you.blogspot.com/">Menu 1.1</a>

   <ul class="sub_nav">

    <li><a href="http://www.bloggertrick4you.blogspot.com/">Menu 1</a></li>

    <li><a href="http://www.bloggertrick4you.blogspot.com/">Menu 2</a></li>

    <li><a href="http://www.bloggertrick4you.blogspot.com/">Menu 3</a></li>

    <li><a href="http://www.bloggertrick4you.blogspot.com/">Menu 4</a></li>

    <li><a href="http://www.bloggertrick4you.blogspot.com/">Menu 5</a></li>

    <li><a href="http://www.bloggertrick4you.blogspot.com/">Menu 6</a></li>

    <li><a href="http://www.bloggertrick4you.blogspot.com/">Menu 7</a></li>

   </ul>

  </li>

  <li><a href="http://www.bloggertrick4you.blogspot.com/">Menu 2.1</a>

   <ul class="sub_nav">

    <li><a href="http://www.bloggertrick4you.blogspot.com/">Menu 1</a></li>

    <li><a href="http://www.bloggertrick4you.blogspot.com/">Menu 2</a></li>

    <li><a href="http://www.bloggertrick4you.blogspot.com/">Menu 3</a></li>

    <li><a href="http://www.bloggertrick4you.blogspot.com/">Menu 4</a></li>

   </ul>

  </li>

  <li><a href="http://www.bloggertrick4you.blogspot.com/">Menu 3.1</a>

  </li>

  <li><a class="last" href="http://www.bloggertrick4you.blogspot.com/">Menu 4.1</a>

   <ul class="sub_nav">

    <li><a href="http://www.bloggertrick4you.blogspot.com/">Menu 1</a></li>

    <li><a href="http://www.bloggertrick4you.blogspot.com/">Menu 2</a></li>

    <li><a href="http://www.bloggertrick4you.blogspot.com/">Menu 3</a></li>

    <li><a href="http://www.bloggertrick4you.blogspot.com/">Menu 4</a></li>

   </ul>

  </li>

 </ul>

 4.Replace www.bloggertrick4you.blogspot.com With Links
 5.Replace Menu With Link Text
 6.Click "Save" Button
     It's Done!

  Read More:You Can Also Love This Widgets

  Share its with your friends! Thanks alot For visiting Our Website! Kindly Bookmark and Share it With you Friends.