Need help in adding a stylish horizontal drop down jQuery menu with sub-sub category and hover animation, current / active page / link highlighter effects to blogger. Just follow the given step by step tutorial with images and demo.

How To Add jQuery Drop Down Menu To Blogger

Drop down Navigation menu is an essential part of any blog or website. Maintaining a clean, easy to use navigation menu is a huge part of creating an effective design. Too many links can confuse a reader, while too few can leave them wondering what they’re missing. A drop down menu is a great way to hide extra links while still making them available to curious readers. Drop down menus can help organize and categorize content links. If your blog contains a large amount of information and you’re interested in categorizing your links a little better, a drop down menu might be the ticket! It helps visitors to easily get the required content from the whole blog.

Stylish jQuery menu for blogger with highlighter

Since Blogger doesn’t offer the option to automatically add a drop down menu as WordPress does, we have to make our own. This requires a little bit of CSS and HTML knowledge, but I will walk you through it so it doesn’t seem so confusing. The menu I’ve put together is built entirely with CSS3, HTML, jQuery and JavaScript. You can view a demo of it here. While WordPress makes it easy to add a drop down menu (sub items), it’s a little more complicated on Blogger. We’ll basically be creating a list within a list, and all that’s needed is some extra code and styling! To get started, you’ll need to follow the below tutorial with images:

Adding The jQuery 2-Sub Drop Down Menu


Step 1. Login to your blogger account > Dashboard > Template > Edit HTML


how to edit blog template


Step 2. Click anywhere inside the code and find the following code ( use Ctrl + F ) :

</header>

Step 3. Just below </header> add the following HTML code :

 <div id="navmenu">
    <ul>
        <li><a class="highlight" href="#">Home</a></li>
        <li><a href="#">Product</a>
              <ul>

              <li><a href="#">Product 1</a>
                    <ul>
                      <li><a href="#">Sub Item</a></li>
                      <li><a href="#">Sub Item</a></li>
                    </ul>
              </li>

              <li><a href="#">Product 2</a>
                    <ul>
                      <li><a href="#">Sub Item</a></li>
                      <li><a href="#">Sub Item</a></li>
                    </ul>
              </li>

              </ul>
        </li>
        <li><a href="#">Category</a>
              <ul>

              <li><a href="#">Category 1</a>
                    <ul>
                      <li><a href="#">Sub Item</a></li>
                      <li><a href="#">Sub Item</a></li>
                    </ul>
              </li>
              <li><a href="#">Category 2</a></li>
              <li><a href="#">Category 3</a>
                    <ul>
                      <li><a href="#">Sub Item</a></li>
                      <li><a href="#">Sub Item</a></li>
                    </ul>
              </li>

              </ul>
        </li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

Step 4. Configuration of HTML code :


1. Replace # with the URL of the link.


Say if your post URL is  http://howbloggerz.blogspot.com/2016/05/how-to-add-drop-down-menu-to-blogger.html
or if your page URL is  http://howbloggerz.blogspot.com/p/page.html

To make sure that current page link highlighter works properly with country redirect.

Add only : /2016/05/how-to-add-drop-down-menu-to-blogger.html
or /p/page.html


Example :

<a href="/2016/05/how-to-add-drop-down-menu-to-blogger.html">Title</a>

Note: Use full URL for home page link ( do not use above format ).


2. Replace the text inside the code with title of that specific URL.


<a href="#">Title</a>

3. How to add more categories :


To add another category say "Group" before "About", place the following code just above it :

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

Example :

<div id="navmenu">
    <ul>
        <li><a class="highlight" href="#">Home</a></li>
        <li><a href="#">Product</a>
              <ul>

              <li><a href="#">Product 1</a>
                    <ul>
                      <li><a href="#">Sub Item</a></li>
                      <li><a href="#">Sub Item</a></li>
                    </ul>
              </li>

              <li><a href="#">Product 2</a>
                    <ul>
                      <li><a href="#">Sub Item</a></li>
                      <li><a href="#">Sub Item</a></li>
                    </ul>
              </li>

              </ul>
        </li>
        <li><a href="#">Category</a>
              <ul>

              <li><a href="#">Category 1</a>
                    <ul>
                      <li><a href="#">Sub Item</a></li>
                      <li><a href="#">Sub Item</a></li>
                    </ul>
              </li>
              <li><a href="#">Category 2</a></li>
              <li><a href="#">Category 3</a>
                    <ul>
                      <li><a href="#">Sub Item</a></li>
                      <li><a href="#">Sub Item</a></li>
                    </ul>
              </li>

              </ul>
        </li>
        <li><a href="#">Group</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>



4. How to add Sub-category :


Say if you want to add sub-category to category "Group" then place the following code just above the closing tag </li> of "Group" :

<ul>
<li><a href="#">Sub Group</a></li>
</ul>

Example :

<li><a href="#">Group</a>
      <ul>
      <li><a href="#">Sub Group</a></li>
      </ul>
</li>

To add another sub category in "Group" add following code just above closing tag </ul> of  "Group" :

<li><a href="#">Sub Group</a></li>

Example :

<li><a href="#">Group</a>
      <ul>
      <li><a href="#">Sub Group 1</a></li>
      <li><a href="#">Sub Group 2</a></li>
      </ul>
</li>


5. How to add Sub-sub category :


Say if you want to add sub-sub category inside "Group" in "Sub Group 1"  add the following code just above the closing tag </li> of "Sub Group 1" :

<ul>
<li><a href="#">Sub-Sub Group</a></li>
</ul>

Example :

<li><a href="#">Group</a>
      <ul>
      <li><a href="#">Sub Group 1</a>

            <ul>
            <li><a href="#">Sub-Sub Group</a></li>
            </ul>

      </li>
      <li><a href="#">Sub Group 2</a></li>
      </ul>
</li>



Step 4. Again find the code </head> and place anyone of the following code just above it :





jQuery menu for blogger 1


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(document).ready(function() {
        var str = location.href.toLowerCase();
        $('#navmenu ul li a').each(function() {
            if (str.indexOf(this.href.toLowerCase()) > -1) {
                $("li a.highlight").removeClass("highlight");
                $(this).addClass("highlight")
            }
        });

        $('#navmenu ul ul li a').each(function() {
        if ($(this).hasClass('highlight')){
        $(this).parent().parent().parent().children(':first-child').addClass('highlight');
        $(this).parent().addClass('highlights');
        } });

        $('#navmenu ul ul ul li a').each(function() {
        if ($(this).hasClass('highlight')){
        $(this).parent().parent().parent().parent().parent().children(':first-child').addClass('highlight');
        $(this).parent().parent().parent().addClass('highlights');
        $(this).parent().addClass('highlights');
        } });

        $("<span></span>").insertBefore("#navmenu ul ul ul");
        $("#navmenu ul ul ul").parent().find("a").css({
            "padding": "5px 28px 7px 16px"
        });

        $("#navmenu ul ul ul").hover(function() {
            $(this).prev().css("opacity", "0");
        }, function() {
            $(this).prev().css("opacity", "1");
        });
    });
</script>


<style type="text/css">
    #navmenu,
    #navmenu ul,
    #navmenu ul li,
    #navmenu ul ul,
    #navmenu ul ul li,
    #navmenu ul ul ul,
    #navmenu ul ul ul li {
        z-index: 1000;
    }
   
    #navmenu ul {
        margin: 0;
        padding: 0
    }
   
    #navmenu li {
        margin: 0;
        padding: 0
    }
   
    #navmenu a {
        margin: 0;
        padding: 0
    }
   
    #navmenu ul {
        list-style: none;
        overflow: visible;
    }
   
    #navmenu a {
        text-decoration: none
    }
   
    #navmenu {
        height: 70px;
        background-color: #232323;
        box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
        width: auto;
    }
   
    #navmenu > ul > li {
        float: left;
        margin-left: 15px;
        position: relative
    }
   
    #navmenu > ul > li > a {
        color: #a0a0a0;
        font-family: Verdana, 'Lucida Grande';
        font-size: 15px;
        line-height: 70px;
        padding: 15px 20px;
        border: none;
        display: inline;
        -webkit-transition: color .15s;
        -moz-transition: color .15s;
        -o-transition: color .15s;
        transition: color .15s
    }
   
    #navmenu > ul > li > a:hover,
    #navmenu ul li a.highlight {
        color: #fff;
        background-color: #232323;
    }
   
    #navmenu > ul > li > ul {
        opacity: 0;
        visibility: hidden;
        padding: 16px 0 20px 0;
        background-color: #fafafa;
        text-align: left;
        position: absolute;
        top: 55px;
        left: 50%;
        margin-left: -90px;
        width: 180px;
        overflow: visible;
        border: none;
        -webkit-transition: all .3s .1s;
        -moz-transition: all .3s .1s;
        -o-transition: all .3s .1s;
        transition: all .3s .1s;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    }
   
    #navmenu > ul > li:hover > ul {
        opacity: 1;
        top: 65px;
        visibility: visible
    }
   
    #navmenu > ul > li > ul:before {
        content: '';
        display: block;
        border-color: transparent transparent #fafafa transparent;
        border-style: solid;
        border-width: 10px;
        position: absolute;
        top: -20px;
        left: 50%;
        margin-left: -10px
    }
   
    #navmenu > ul ul > li {
        position: relative;
        float: none;
    }
   
    #navmenu ul ul a {
        color: #323232;
        font-family: Verdana, 'Lucida Grande';
        font-size: 13px;
        background-color: #fafafa;
        padding: 5px 8px 7px 16px;
        display: block;
        border: none;
        -webkit-transition: background-color 0.1s;
        -moz-transition: background-color 0.1s;
        -o-transition: background-color 0.1s;
        transition: background-color 0.1s
    }
   
    #navmenu ul ul li:hover {
        background-color: #cc2c24;
    }
   
    #navmenu ul ul li:hover span {
        right: 10px;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }
   
    #navmenu ul ul li:hover span::before {
        border-color: transparent transparent transparent #fff;
    }
   
    #navmenu ul ul ul {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: -16px;
        left: 206px;
        padding: 16px 0 20px 0;
        background-color: #fafafa;
        text-align: left;
        width: 180px;
        border: none;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    }
   
    #navmenu ul ul > li:hover > ul {
        opacity: 1;
        left: 190px;
        visibility: visible
    }
   
    #navmenu ul ul a:hover {
        color: #f0f0f0;
        background-color: #cc2c24;
    }
   
    #navmenu ul ul span::before {
        content: '';
        display: block;
        border-color: transparent transparent transparent #000000;
        border-style: solid;
        border-width: 5px;
        position: absolute;
        z-index: 1001;
    }

    #navmenu ul ul li.highlights span::before {
        border-color: transparent transparent transparent #fff;
        }
   
    #navmenu ul ul span:hover::before {
        border-color: transparent transparent transparent #fafafa;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }
   
    #navmenu ul ul span {
        position: absolute;
        right: 20px;
        top: 10px;
    }
</style>



jQuery menu for blogger 2


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(document).ready(function() {
        var str = location.href.toLowerCase();
        $('#navmenu ul li a').each(function() {
            if (str.indexOf(this.href.toLowerCase()) > -1) {
                $("li a.highlight").removeClass("highlight");
                $(this).addClass("highlight")
            }
        });

        $('#navmenu ul ul li a').each(function() {
        if ($(this).hasClass('highlight')){
        $(this).parent().parent().parent().children(':first-child').addClass('highlight');
        $(this).parent().addClass('highlights');
        } });

        $('#navmenu ul ul ul li a').each(function() {
        if ($(this).hasClass('highlight')){
        $(this).parent().parent().parent().parent().parent().children(':first-child').addClass('highlight');
        $(this).parent().parent().parent().addClass('highlights');
        $(this).parent().addClass('highlights');
        } });

        $("<span></span>").insertBefore("#navmenu ul ul ul");
        $("#navmenu ul ul ul").parent().find("a").css({
            "padding": "5px 28px 7px 16px"
        });

        $("#navmenu ul ul ul").hover(function() {
            $(this).prev().css("opacity", "0");
        }, function() {
            $(this).prev().css("opacity", "1");
        });
    });
</script>


<style type="text/css">
    #navmenu,
    #navmenu ul,
    #navmenu ul li,
    #navmenu ul ul,
    #navmenu ul ul li,
    #navmenu ul ul ul,
    #navmenu ul ul ul li {
        z-index: 1000;
    }
   
    #navmenu ul {
        margin: 0;
        padding: 0
    }
   
    #navmenu li {
        margin: 0;
        padding: 0
    }
   
    #navmenu a {
        margin: 0;
        padding: 0
    }
   
    #navmenu ul {
        list-style: none;
        overflow: visible;
    }
   
    #navmenu a {
        text-decoration: none
    }
   
    #navmenu {
        height: 50px;
        background-color: #265783;
        box-shadow: 0 2px 3px rgb(167, 205, 240);
        width: auto;
        border-bottom: 3px solid #214565;
    }
   
    #navmenu > ul > li {
        float: left;
        position: relative;
        border-right: 1px solid #214565;
    }
   
    #navmenu > ul > li > a {
        color: #fff;
        font-family: Verdana, 'Lucida Grande';
        font-size: 15px;
        line-height: 50px;
        padding: 15px 20px;
        border: none;
        display: inline;
        -webkit-transition: color .15s;
        -moz-transition: color .15s;
        -o-transition: color .15s;
        transition: color .15s
    }
   
    #navmenu > ul > li > a:hover,
    #navmenu ul li a.highlight {
        color: #fff;
        background-color: #214565;
    }
   
    #navmenu > ul > li > ul {
        opacity: 0;
        visibility: hidden;
        padding: 16px 0 20px 0;
        background-color: #fafafa;
        text-align: left;
        position: absolute;
        top: 70px;
        width: 180px;
        overflow: visible;
        border: none;
        -webkit-transition: all .3s .1s;
        -moz-transition: all .3s .1s;
        -o-transition: all .3s .1s;
        transition: all .3s .1s;
        -webkit-border-radius: 3px;
        -moz-border-radius: 3px;
        border-radius: 3px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    }
   
    #navmenu > ul > li:hover > ul {
        opacity: 1;
        top: 50px;
        visibility: visible
    }
   
    #navmenu > ul > li > ul:before {
        content: '';
        display: block;
        border-color: transparent transparent #fafafa transparent;
        border-style: solid;
        border-width: 10px;
        position: absolute;
        top: -15px;
        left: 10%;
        margin-left: -10px
    }
   
    #navmenu > ul ul > li {
        position: relative;
        float: none;
    }
   
    #navmenu ul ul a {
        color: #323232;
        font-family: Verdana, 'Lucida Grande';
        font-size: 13px;
        background-color: #fafafa;
        padding: 5px 8px 7px 16px;
        display: block;
        border: none;
        -webkit-transition: background-color 0.1s;
        -moz-transition: background-color 0.1s;
        -o-transition: background-color 0.1s;
        transition: background-color 0.1s
    }
   
    #navmenu ul ul li:hover {
        background-color: #cc2c24;
    }
   
    #navmenu ul ul li:hover span {
        right: 10px;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }
   
    #navmenu ul ul li:hover span::before {
        border-color: transparent transparent transparent #fff;
    }
   
    #navmenu ul ul ul {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: -16px;
        left: 206px;
        padding: 16px 0 20px 0;
        background-color: #fafafa;
        text-align: left;
        width: 180px;
        border: none;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    }

    #navmenu ul ul ul::before {
        content: '';
        display: block;
        border-color: transparent #dbdbdb transparent transparent;
        border-style: solid;
        border-width: 10px;
        position: absolute;
        top: 20px;
        left: -20px;
    }
       
   
    #navmenu ul ul > li:hover > ul {
        opacity: 1;
        left: 190px;
        visibility: visible
    }
   
    #navmenu ul ul a:hover {
        color: #f0f0f0;
        background-color: #214565;
    }
   
    #navmenu ul ul span::before {
        content: '';
        display: block;
        border-color: transparent transparent transparent #000000;
        border-style: solid;
        border-width: 5px;
        position: absolute;
        z-index: 1001;
    }

    #navmenu ul ul li.highlights span::before {
        border-color: transparent transparent transparent #fff;
    }
   
    #navmenu ul ul span:hover::before {
        border-color: transparent transparent transparent #fafafa;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }
   
    #navmenu ul ul span {
        position: absolute;
        right: 20px;
        top: 10px;
    }
</style>



jQuery menu for blogger 3


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(document).ready(function() {
        var str = location.href.toLowerCase();
        $('#navmenu ul li a').each(function() {
            if (str.indexOf(this.href.toLowerCase()) > -1) {
                $("li a.highlight").removeClass("highlight");
                $(this).addClass("highlight")
            }
        });

        $('#navmenu ul ul li a').each(function() {
        if ($(this).hasClass('highlight')){
        $(this).parent().parent().parent().children(':first-child').addClass('highlight');
        $(this).parent().addClass('highlights');
        } });

        $('#navmenu ul ul ul li a').each(function() {
        if ($(this).hasClass('highlight')){
        $(this).parent().parent().parent().parent().parent().children(':first-child').addClass('highlight');
        $(this).parent().parent().parent().addClass('highlights');
        $(this).parent().addClass('highlights');
        } });

        $("<span></span>").insertBefore("#navmenu ul ul ul");
        $("#navmenu ul ul ul").parent().find("a").css({
            "padding": "10px 28px 12px 16px"
        });

        $("#navmenu ul ul ul").hover(function() {
            $(this).prev().css("opacity", "0");
        }, function() {
            $(this).prev().css("opacity", "1");
        });
    });
</script>


<style type="text/css">
    #navmenu,
    #navmenu ul,
    #navmenu ul li,
    #navmenu ul ul,
    #navmenu ul ul li,
    #navmenu ul ul ul,
    #navmenu ul ul ul li {
        z-index: 1000;
    }
   
    #navmenu ul {
        margin: 0;
        padding: 0
    }
   
    #navmenu li {
        margin: 0;
        padding: 0
    }
   
    #navmenu a {
        margin: 0;
        padding: 0
    }
   
    #navmenu ul {
        list-style: none;
        overflow: visible;
    }
   
    #navmenu a {
        text-decoration: none
    }
   
    #navmenu {
        background: -webkit-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
        background: -moz-linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
        background: linear-gradient(#f6f6f6, #e9eaea) repeat scroll 0 0 transparent;
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f6f6', endColorstr='#e9eaea',GradientType=0 );
        height: 50px;
        box-shadow: 1px 1px 3px #C2C2C2;
        width: auto;
        border-radius: 0 0 3px 3px;
        -webkit-border-radius: 0 0 3px 3px;
        -moz-border-radius: 0 0 3px 3px;
    }
   
    #navmenu > ul > li {
        float: left;
        position: relative;
        border-right: 1px solid #CFCFCF;
    }
   
    #navmenu > ul > li > a {
        color: #000;
        font-family: Verdana, 'Lucida Grande';
        font-size: 15px;
        line-height: 50px;
        padding: 15px 20px;
        border: none;
        display: inline;
        -webkit-transition: color .15s;
        -moz-transition: color .15s;
        -o-transition: color .15s;
        transition: color .15s
    }
   
    #navmenu > ul > li > a:hover,
    #navmenu ul li a.highlight {
        color: #fff;
        background-color: #50A2EE;
    }
   
    #navmenu > ul > li > ul {
        opacity: 0;
        visibility: hidden;
        padding: 0px;
        background-color: #fafafa;
        text-align: left;
        position: absolute;
        top: 150px;
        width: 180px;
        overflow: visible;
        border: none;
        -webkit-transition: all .3s .1s;
        -moz-transition: all .3s .1s;
        -o-transition: all .3s .1s;
        transition: all .3s .1s;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    }
   
    #navmenu > ul > li:hover > ul {
        opacity: 1;
        top: 54px;
        visibility: visible
    }
   
    #navmenu > ul > li > ul:before {
        content: '';
        display: block;
        border-color: transparent transparent #fafafa transparent;
        border-style: solid;
        border-width: 15px;
        position: absolute;
        top: -25px;
        left: 10%;
        margin-left: -10px
    }
   
    #navmenu > ul ul > li {
        position: relative;
        float: none;
        border-bottom: 1px solid #ddd;
    }

    #navmenu ul ul a {
        color: #323232;
        font-family: Verdana, 'Lucida Grande';
        font-size: 13px;
        background-color: #fafafa;
        padding: 10px 8px 12px 16px;
        display: block;
        border: none;
        -webkit-transition: background-color 0.1s;
        -moz-transition: background-color 0.1s;
        -o-transition: background-color 0.1s;
        transition: background-color 0.1s
    }

    #navmenu ul ul li:first-child a, #navmenu ul ul ul li:first-child a {
        border-radius: 5px 5px 0 0;
        -webkit-border-radius: 5px 5px 0 0;
        -moz-border-radius: 5px 5px 0 0;
    }

    #navmenu ul ul li:last-child a, #navmenu ul ul ul li:last-child a {
        border-radius: 0 0 5px 5px;
        -webkit-border-radius: 0 0 5px 5px;
        -moz-border-radius: 0 0 5px 5px;
    }

    #navmenu ul ul li:last-child {
        border-bottom: 0px;
    }
   
    #navmenu ul ul li:hover span {
        -webkit-transform: rotate(90deg);
        -ms-transform:rotate(360deg);
        transform: rotate(90deg);
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }
   
    #navmenu ul ul ul {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: 0px;
        left: 206px;
        padding: 0px;
        background-color: #fafafa;
        text-align: left;
        width: 180px;
        border: none;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    }

    #navmenu ul ul ul::before {
        content: '';
        display: block;
        border-color: transparent #dbdbdb transparent transparent;
        border-style: solid;
        border-width: 10px;
        position: absolute;
        top: 10px;
        left: -20px;
        z-index: 1000;
    }
       
   
    #navmenu ul ul > li:hover > ul {
        opacity: 1;
        left: 190px;
        visibility: visible
    }
   
    #navmenu ul ul a:hover {
        color: #f0f0f0;
        background-color: #00A2E8;
    }
   
    #navmenu ul ul span {
        background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_DCK9FYXJKQqSg1eThkOcwy1bjicNCj-ol8R4xeYCKhL6_MZPIOWrenidJWhtZ-1xkR4BI1X3kcOF2YJJJTZrRAWJ2JkBxGGigs4pIdah1pvXrmUnz1KmDpyOsd0Xmk1X7KzqfdvUkN4j/s1600/hbz-arrow.png");
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        position: absolute;
        right: 20px;
        top: 10px;
        width: 18px;
        height: 18px;
    }
</style>



jQuery menu for blogger 4

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(document).ready(function() {
        var str = location.href.toLowerCase();
        $('#navmenu ul li a').each(function() {
            if (str.indexOf(this.href.toLowerCase()) > -1) {
                $("li a.highlight").removeClass("highlight");
                $(this).addClass("highlight")
            }
        });

        $('#navmenu ul ul li a').each(function() {
        if ($(this).hasClass('highlight')){
        $(this).parent().parent().parent().children(':first-child').addClass('highlight');
        $(this).parent().addClass('highlights');
        } });

        $('#navmenu ul ul ul li a').each(function() {
        if ($(this).hasClass('highlight')){
        $(this).parent().parent().parent().parent().parent().children(':first-child').addClass('highlight');
        $(this).parent().parent().parent().addClass('highlights');
        $(this).parent().addClass('highlights');
        } });

        $("<span></span>").insertBefore("#navmenu ul ul ul");
        $("#navmenu ul ul ul").parent().find("a").css({
            "padding": "10px 28px 12px 16px"
        });

        $("#navmenu ul ul ul").hover(function() {
            $(this).prev().css("opacity", "0");
        }, function() {
            $(this).prev().css("opacity", "1");
        });
    });
</script>


<style type="text/css">
    #navmenu,
    #navmenu ul,
    #navmenu ul li,
    #navmenu ul ul,
    #navmenu ul ul li,
    #navmenu ul ul ul,
    #navmenu ul ul ul li {
        z-index: 1000;
    }
   
    #navmenu ul {
        margin: 0;
        padding: 0
    }
   
    #navmenu li {
        margin: 0;
        padding: 0
    }
   
    #navmenu a {
        margin: 0;
        padding: 0
    }
   
    #navmenu ul {
        list-style: none;
        overflow: visible;
    }
   
    #navmenu a {
        text-decoration: none
    }
   
    #navmenu {
        background: -webkit-linear-gradient(#cbcbcb, #a1a1a1) repeat scroll 0 0 transparent;
        background: -moz-linear-gradient(#cbcbcb, #a1a1a1) repeat scroll 0 0 transparent;
        background: linear-gradient(#cbcbcb, #a1a1a1) repeat scroll 0 0 transparent;
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cbcbcb', endColorstr='#a1a1a1',GradientType=0 );
        height: 50px;
        box-shadow: 1px 1px 3px #C2C2C2;
        width: auto;
        border-radius: 30px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;

    }
   
    #navmenu > ul > li {
        float: left;
        position: relative;
        margin-left: 15px;
    }
   
    #navmenu > ul > li > a {
        color: #fff;
        font-family: Verdana, 'Lucida Grande';
        font-size: 15px;
        line-height: 50px;
        padding: 5px 15px;
        border: none;
        border-radius: 30px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        text-shadow: 0px 2px 1px #C6C6C6;
        display: inline;
        -webkit-transition: color .15s;
        -moz-transition: color .15s;
        -o-transition: color .15s;
        transition: color .15s
    }
   
    #navmenu > ul > li > a:hover,
    #navmenu ul li a.highlight {
        color: #000;
        background-color: #fff;
        box-shadow: 1px 2px 3px #8d8d8d;
    }
   
    #navmenu ul ul a.highlight {
        background-color: #F5F5F5;
    }

    #navmenu > ul > li > ul {
        opacity: 0;
        visibility: hidden;
        padding: 0px;
        background-color: #fafafa;
        text-align: left;
        position: absolute;
        top: 54px;
        width: 180px;
        overflow: visible;
        border: none;
        -webkit-transition: all .3s .1s;
        -moz-transition: all .3s .1s;
        -o-transition: all .3s .1s;
        transition: all .3s .1s;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    }
   
    #navmenu > ul > li:hover > ul {
        opacity: 1;
        top: 54px;
        visibility: visible
    }
   
    #navmenu > ul > li > ul:before {
        content: '';
        display: block;
        border-color: transparent transparent #fafafa transparent;
        border-style: solid;
        border-width: 15px;
        position: absolute;
        top: -25px;
        left: 10%;
        margin-left: -10px
    }
   
    #navmenu > ul ul > li {
        position: relative;
        float: none;
        border-bottom: 1px solid #ddd;
    }

    #navmenu ul ul a {
        color: #323232;
        font-family: Verdana, 'Lucida Grande';
        font-size: 13px;
        background-color: #fff;
        padding: 10px 8px 12px 16px;
        display: block;
        border: none;
        -webkit-transition: background-color 0.1s;
        -moz-transition: background-color 0.1s;
        -o-transition: background-color 0.1s;
        transition: background-color 0.1s
    }

    #navmenu ul ul li:first-child a, #navmenu ul ul ul li:first-child a {
        border-radius: 15px 15px 0 0;
        -webkit-border-radius: 15px 15px 0 0;
        -moz-border-radius: 15px 15px 0 0;
    }

    #navmenu ul ul li:last-child a, #navmenu ul ul ul li:last-child a {
        border-radius: 0 0 15px 15px;
        -webkit-border-radius: 0 0 15px 15px;
        -moz-border-radius: 0 0 15px 15px;
    }

    #navmenu ul ul li:last-child {
        border-bottom: 0px;
    }
   
    #navmenu ul ul li:hover span {  
        animation: fade 1s forwards;
        -webkit-animation: fade 1s forwards;
        -moz-animation: fade 1s forwards;
        -o-animation: fade 1s forwards;
        animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        -moz-animation-iteration-count: infinite; 
        -o-animation-iteration-count: infinite;
    }
   
    @keyframes fade {
        0%   {opacity:0;}
        50%   {opacity:1;}
        100% {opacity:0;}
    }

    @-webkit-keyframes fade {
        0%   {opacity:0;}
        50%   {opacity:1;}
        100% {opacity:0;}
    }

    @-moz-keyframes fade {
        0%   {opacity:0;}
        50%   {opacity:1;}
        100% {opacity:0;}
    }

    @-o-keyframes fade {
        0%   {opacity:0;}
        50%   {opacity:1;}
        100% {opacity:0;}
    }

    #navmenu ul ul ul {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: 0px;
        left: 206px;
        padding: 0px;
        background-color: #fafafa;
        text-align: left;
        width: 180px;
        border: none;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4)
    }

    #navmenu ul ul ul::before {
        content: '';
        display: block;
        border-color: transparent #dbdbdb transparent transparent;
        border-style: solid;
        border-width: 10px;
        position: absolute;
        top: 10px;
        left: -20px;
        z-index: 1000;
    }
       
   
    #navmenu ul ul > li:hover > ul {
        opacity: 1;
        left: 190px;
        visibility: visible
    }
   
    #navmenu ul ul a:hover {
        color: #000;
        background-color: #F5F5F5;
    }
   
    #navmenu ul ul span {
        border-color: transparent transparent transparent #777;
        border-style: solid;
        border-width: 5px;
        display: block;
        position: absolute;
        right: 20px;
        top: 14px;
    }
</style>


jQuery menu for blogger 5


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
    $(document).ready(function() {
        var str = location.href.toLowerCase();
        $('#navmenu ul li a').each(function() {
            if (str.indexOf(this.href.toLowerCase()) > -1) {
                $("li a.highlight").removeClass("highlight");
                $(this).addClass("highlight")
            }
        });

        $("<span></span>").insertBefore("#navmenu ul ul ul");
        $("#navmenu ul ul ul").parent().find("a").css({
            "padding": "5px 28px 7px 16px"
        });

        $("#navmenu ul ul ul").hover(function() {
            $(this).prev().css("opacity", "0");
        }, function() {
            $(this).prev().css("opacity", "1");
        });

        $("#navmenu ul ul").hover(function() {
            $(this).prev().addClass("highlightz");
        }, function() {
            $(this).prev().removeClass("highlightz");
        });

        function getRandomClass() {
           var classes = new Array("a", "b", "c", "d", "e", "f");
   
           var randomNumber = Math.floor(Math.random()*7);

           return classes[randomNumber];
        };
        $("#navmenu ul ul li:has(ul)").hover(function() {
           var randomClass = getRandomClass();
           $(this).attr("class", randomClass);
        });

        $('#navmenu ul ul ul li a').each(function() {
          if ($(this).hasClass('highlight')){
              $(this).removeClass('highlight');
              $(this).parent().parent().parent().parent().parent().children(':first-child').addClass('highlight');
          }
        });

        $('#navmenu ul ul li a').each(function() {
          if ($(this).hasClass('highlight')){
              $(this).removeClass('highlight');
              $(this).parent().parent().parent().children(':first-child').addClass('highlight');
          }
        });


    });
</script>


<style type="text/css">


    #navmenu ul ul li.a:hover a, #navmenu ul ul li.a:hover ul {
        background-color: #65834C;
        color: #fff;
    }


    #navmenu ul ul li.b:hover a, #navmenu ul ul li.b:hover ul {
        background-color: #4F4C83;
        color: #fff;
    }

    #navmenu ul ul li.c:hover a, #navmenu ul ul li.c:hover ul {
        background-color: #4C7983;
        color: #fff;
    }

    #navmenu ul ul li.d:hover a, #navmenu ul ul li.d:hover ul {
        background-color: #834C4C;
        color: #fff;
    }

    #navmenu ul ul li.e:hover a, #navmenu ul ul li.e:hover ul {
        background-color: #4D6899;
        color: #fff;
    }

    #navmenu ul ul li.f:hover a, #navmenu ul ul li.f:hover ul {
        background-color: #97944C;
        color: #fff;
    }

    #navmenu ul ul ul a:hover {
       text-decoration: underline;
    }

    #navmenu,
    #navmenu ul,
    #navmenu ul li,
    #navmenu ul ul,
    #navmenu ul ul li,
    #navmenu ul ul ul,
    #navmenu ul ul ul li {
        z-index: 1000;
    }
   
    #navmenu ul {
        margin: 0;
        padding: 0
    }
   
    #navmenu li {
        margin: 0;
        padding: 0
    }
   
    #navmenu a {
        margin: 0;
        padding: 0
    }
   
    #navmenu ul {
        list-style: none;
        overflow: visible;
    }
   
    #navmenu a {
        text-decoration: none
    }
   
    #navmenu {
        height: 50px;
        background-color: #384959;
        box-shadow: 0 0 3px rgb(206, 206, 206);
        width: auto;
    }
   
    #navmenu > ul > li {
        float: left;
        position: relative;
    }
   
    #navmenu > ul > li > a {
        color: #fff;
        font-family: Verdana, 'Lucida Grande';
        font-size: 15px;
        line-height: 50px;
        padding: 15px 20px;
        border: none;
        display: inline;
        -webkit-transition: color .15s;
        -moz-transition: color .15s;
        -o-transition: color .15s;
        transition: color .15s
    }
   

    #navmenu > ul > li > a:hover,
    #navmenu ul li a.highlight,
    #navmenu .highlightz {
        color: #000;
        background-color: #fff;
    }

    #navmenu > ul > li > ul {
        opacity: 0;
        visibility: hidden;
        padding: 16px 0 20px 0;
        background-color: #fff;
        text-align: left;
        position: absolute;
        width: 180px;
        overflow: visible;
        border: none;
        -webkit-transition: all .3s .1s;
        -moz-transition: all .3s .1s;
        -o-transition: all .3s .1s;
        transition: all .3s .1s;
        -webkit-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
        -moz-box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
        box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4)
    }
   
    #navmenu > ul > li:hover > ul {
        opacity: 1;
        visibility: visible
    }
   
    #navmenu > ul ul > li {
        position: relative;
        float: none;
    }
   
    #navmenu ul ul a {
        color: #323232;
        font-family: Verdana, 'Lucida Grande';
        font-size: 13px;
        background-color: #fff;
        padding: 5px 8px 7px 16px;
        display: block;
        border: none;
        -webkit-transition: background-color 0.1s;
        -moz-transition: background-color 0.1s;
        -o-transition: background-color 0.1s;
        transition: background-color 0.1s
    }
   
    #navmenu ul ul li:hover {
        background-color: #cc2c24;
    }
   
    #navmenu ul ul li:hover span {
        right: 10px;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }
   
    #navmenu ul ul li:hover span::before {
        border-color: transparent transparent transparent #fff;
    }
   
    #navmenu ul ul ul {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        top: -16px;
        left: 180px;
        padding: 16px 0 20px 0;
        background-color: #fff;
        text-align: left;
        width: 180px;
        border: none;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
        -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
        box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);
        z-index: 1000;
    }
       
   
    #navmenu ul ul > li:hover > ul {
        opacity: 1;
        visibility: visible
    }
   
    #navmenu ul ul a:hover {
        color: #f0f0f0;
        background-color: #214565;
    }
   
    #navmenu ul ul span::before {
        content: '';
        display: block;
        border-color: transparent transparent transparent #000000;
        border-style: solid;
        border-width: 5px;
        position: absolute;
        z-index: 1001;
    }

    #navmenu ul ul li.highlights span::before {
        border-color: transparent transparent transparent #fff;
    }
   
    #navmenu ul ul span:hover::before {
        border-color: transparent transparent transparent #fafafa;
        -webkit-transition: all .3s;
        -moz-transition: all .3s;
        -o-transition: all .3s;
        transition: all .3s;
    }
   
    #navmenu ul ul span {
        position: absolute;
        right: 20px;
        top: 10px;
    }
</style>


Step 4. Click Save template.

That's all !

Refresh your blog to see stylish horizontal jquery menu with highlighter. For any issues related to above tutorial comment below. Stay Updated, Browse Howbloggerz ! :)
Love it? Don't forget to Subscribe
  • Hopey Levrey
    Hopey Levrey
    13 May 2016 at 12:04
    Thank you for the great tutorial!
  • Hopey Levrey
    Hopey Levrey
    13 May 2016 at 12:09
    Can I somehow move the dropdown menu beneath the header (the blog title)?
  • Hopey Levrey
    Hopey Levrey
    13 May 2016 at 12:36
    me again :) can I somehow move the menu to the middle? Now, it is very left- sided.
    $ Jarial
    $ Jarial
    13 May 2016 at 12:48
    Hi Hopey Levrey

    Please make the changes and provide your blog URL so i can have a look over your problem.

    I look forward for your response.
    $ Jarial
    $ Jarial
    13 May 2016 at 13:04
    Hi again

    Follow the given steps:

    1. Login to your blog.
    2. Navigate to Dashboard > Template > Customize > Advanced > Add CSS
    3. Enter the following css :

    #navmenu {
    display: block !important;
    text-align: center !important;
    }

    #navmenu > ul > li {
    display: inline-block !important;
    float: none !important;
    }

    I hope this works for you.
  • Hopey Levrey
    Hopey Levrey
    13 May 2016 at 18:10
    Uhm, is there a possibility to make a dloat dropdown menu? :)
    $ Jarial
    $ Jarial
    13 May 2016 at 20:41
    If you are talking about floating menu bar then i would like say that i will post tutorial for it soon. :)

    Subscribe this blog to get updates inside your inbox.

    Stay updated, Browse Howbloggerz!
  • Hopey Levrey
    Hopey Levrey
    30 June 2016 at 22:32
    Uhm, me again. I recently exceeded my dropdown menu by adding more subpoints to subcathegories (so I added the '3rd stage') Now, my menu is really messed up (http://plannedpastel.blogspot.de/) and I don't know how to fix it.. any help?
    Saurabh Jarial
    Saurabh Jarial
    1 July 2016 at 06:12
    Not a big deal Hopey, Move the <ul> tag with label 'exchange' and 'thoughts' under <li> tag with label Japan (guess) or any other.

    Read configuration no. 4 and 5 for more details.
  • eksadelimatg
    eksadelimatg
    31 January 2017 at 10:24
    Hi admin. I have a litte bit of problem with my dropdown menu. It just not working. I've tried using diffenrent code. It looks nice, but it never dropping. I hope u can help me.
    http://eksadelimatg.blogspot.my/
    Saurabh Jarial
    Saurabh Jarial
    4 February 2017 at 15:30
    Hi
    I visited your beautiful blog and I found that there is no jquery script on your blog which simply means that you have not followed the step 4 correctly. Please make sure to follow all steps till the end.
    You can change the CSS code later to make it match up with your blog.
  • Axom Dapun1
    Axom Dapun1
    1 March 2018 at 09:39
    hi, I hv installed your dropdown menu, everything is fine, but in mobile mode dropdown sub menus go behind the below menu, pls reply www.axomdapun.com
    Saurabh Jarial
    Saurabh Jarial
    3 March 2018 at 12:42
    Hi HAZARIKA,
    Please apply the changes and let me know.
  • Toni Sparks
    Toni Sparks
    9 August 2019 at 03:42
    hi this post is very useful and currently im using it on my blog. i just have one question, how can i optimized it on mobile? because menu does not appear on mobile view, only on desktop view. Thanks and more power.
    Saurabh Jarial
    Saurabh Jarial
    18 August 2019 at 20:45
    Hi Tony, Let me tell you this is not a responsive menu so don't expect a mobile menu. Well you can show your desktop menu on mobile or any other customization if you have enabled 'desktop mode on mobile'. To do so go to 'Themes> select gear icon under mobile> No. Show desktop theme on mobile devices.'