Monday, July 13, 2020

Top 5 Responsive Drop Down Menu With Submenu ( in 2020)

Admin | July 13, 2020
welcome to the Tutbig Blogger tutorial today I will show you Responsive Drop Down Menu With Submenu tutorials are available online that you can use for blogger, but I've focused on creating a colorful menu. Because it is difficult to find some kind of menubars. I hope you like this. Please do not forget to share with your social profiles.
Responsive Drop Down Menu With Submenu


Step 1. Login to your blogger account > Dashboard > Template > Edit HTML
Responsive Drop Down Menu With Submenu
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  https://www.tutbig.info/2016/05/how-to-add-drop-down-menu-to-blogger.html

or if your page URL is  https://www.tutbig.info/p/page.html

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

Add only : /2016/05/responsive-drop-down-menu-with-submenu.html
or /p/page.html

Sample:-

<a href="/2016/05/responsive-drop-down-menu-with-submenu.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", put the following code directly on top of it:

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

Sample:-

<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 a subcategory to the "Group" category, then put the following code above the "Group" </li> closing tag:

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

<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 a subcategory within "Group" in "Sub Group 1", add the following code above the closing tag </li> for "Sub Group 1":

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

Example :

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

Responsive Drop Down Menu With Submenu

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

Responsive Drop Down Menu With Submenu
<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>
Responsive Drop Down Menu With Submenu

<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://4.bp.blogspot.com/-Odm4GB62Eno/Vy9sfmXdRDI/AAAAAAAAAn4/4O95b1gxOQ8Vzss-iOznxkcik5BCcHzBgCLcB/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>


Responsive Drop Down Menu With Submenu

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


Responsive Drop Down Menu With Submenu

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

I hope you enjoy this post and the photos. Responsive Drop Down Menu With Sub menu



Related Poste

3 comments:

  1. yes sure it is ture but psd convert. is very easy way to use photoshop illustration and create logo design new 2021 check it my work logo design Melbourne

    ReplyDelete
  2. Printer customer help support alternatives to assist with your HP items including the most recent drivers and investigating articles.

    ReplyDelete
  3. I'm impressed, I must say. Actually rarely can i encounter a blog that's both educative and entertaining, and without a doubt, you could have hit the nail about the head. Your idea is outstanding; the thing is something that too few individuals are speaking intelligently about. We are delighted that we came across this around my try to find some thing with this.토토사이트

    ReplyDelete