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.

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

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 :

DEMO

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

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

<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/AVvXsEjpIjh8u3F8wBlS2bXt8M9WlzB-6w79F9gClYvBS5ppE2Ye0-sTkrs2BJXVdUVzXojz8_lOlMeD8ich_EoatVqtNiyI4un6yNFuvd66EM5tE8hdvYuyH_eaQkzg4lOjcgGNwILe1ZamzPPm/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>

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

<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 ! :)