October 26, 2020

How To Create A Drop Down Menu in WordPress in 2020

Here are six drop down menus created with HTML Codes. A drop down menu is needed, when you have too much content on your website or blog, or you want to keep things organized (Everything is placed in its own category). So this articles is for those who don’t have previously a drop down menu and don’t know how to create a Drop Down Menu.  With the help of HTML Codes You can be easily create a drop down menu. Do changing in codes, you can create a design that was once only achievable if you know how to edit HTML codes.

However i made some drop down menus with the help of HTML Coding for you, you can see below. The menu i have created, features one sub category that appear once the parent link is activated by a hover (When you move a mouse cursors on it). There are 6 Stylish drop down menus that i have made for blogspot users. Pick one f the following and make it on your own blog/website.

How To Create A Drop Down Menu in WordPress

Follow this tutorial to see the step by step process of building your own drop down menu.

Steps:

1: Go To Blogger > Select your blog > Layout

2: Select a Add a Gedget

3: Find “HTML/JavaScript” Widget

4: Paste the following code inside the “HTML/JavaScript” Widget

Code:

<div id=’mbtnavbar’>

<ul id=’mbtnav’>

<li>

<a href=’#‘>Home</a>

</li>

<li>

<a href=’#‘>About</a>

</li>

<li>

<a href=’#‘>Services</a>

<ul>

<li><a href=’#‘>Sub Menu 1</a></li>

<li><a href=’#‘>Sub Menu 2</a></li>

<li><a href=’#‘>Sub Menu 3</a></li>

</ul>

</li>

<li>

<a href=’#‘>Product</a>

<ul>

<li><a href=’#‘>Sub Menu 1</a></li>

<li><a href=’#‘>Sub Menu 2</a></li>

<li><a href=’#‘>Sub Menu 3</a></li>

</ul>

</li>

</ul>

</div>

Replace # with your Page Links and the Text ( Home, About) with relevant page names. The yellow highlighted code is responsible for the drop down menus. You can also copy and paste it under any tab you want just before </li>

To add another Sub Menu just paste this code above </ul>

<li>

<a href=’#‘>Tab Name</a>

</li>

Now Go to Template > Edit HTML

Important: Backup your template and search for ]]></b:skin>
Just above it ( ]]></b:skin> ) paste any of the following code.
Note: Here are six codes and you have to choose only one that you want to get for your own blog/website.
After putting your desired code, Save your template and you are done!

Drop Down Menu 1:

Code:

*—– Drop Down Menu 1 —-*/

#mbtnavbar {

background: #242424;

width: 960px;

color: #FFF;

margin: 0px;

padding: 0;

position: relative;

border-top:0px solid #960100;

height:35px;

}

#mbtnav {

margin: 0;

padding: 0;

}

#mbtnav ul {

float: left;

list-style: none;

margin: 0;

padding: 0;

}

#mbtnav li {

list-style: none;

margin: 0;

padding: 0;

border-left:1px solid #333;

border-right:1px solid #333;

height:35px;

}

#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {

color: #FFF;

display: block;

font:11px normal; margin: 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

}

#mbtnav li a:hover, #mbtnav li a:active {

background: #242424;

color: #FFF;

display: block;

text-decoration: none;

margin: 0;

padding: 9px 12px 10px 12px;

}

#mbtnav li {

float: left;

padding: 0;

}

#mbtnav li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 160px;

margin: 0;

padding: 0;

}

#mbtnav li ul a {

width: 140px;

}

#mbtnav li ul ul {

margin: -25px 0 0 161px;

}

#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {

left: -999em;

}

#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {

left: auto;

}

#mbtnav li:hover, #mbtnav li.sfhover {

position: static;

}

#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {

background: #242424;

width: 120px;

color: #FFF;

display: block;

font:normal 12px normal;

margin: 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

z-index:9999;

border-bottom:1px dotted #333;

}

#mbtnav li li a:hover, #mbtnavli li a:active {

background: #499DF6;

color: #FFF;

display: block; margin: 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

}

Drop Down Menu 2:

Code:

/*—– Drop Down Menu 2 —-*/

#mbtnavbar {

background: #b0d730;

width: 960px;

color: #000;

margin: 0px;

padding: 0;

position: relative;

border-top:0px solid #696A6B ;

height:35px;

}

#mbtnav {

margin: 0;

padding: 0;

}

#mbtnav ul {

float: left;

list-style: none;

margin: 0;

padding: 0;

}

#mbtnav li {

list-style: none;

margin: 0;

padding: 0;

border-left:0px solid #333;

border-right:1px solid #95BF0E;

height:35px;

}

#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {

color: #566E09;

display: block;

font:bold 14px normal; margin: 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

}

#mbtnav li a:hover, #mbtnav li a:active {

background: #FE7C03;

color: #000;

display: block;

text-decoration: none;

margin: 0;

padding: 9px 12px 10px 12px;

}

#mbtnav li {

float: left;

padding: 0;

}

#mbtnav li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 160px;

margin: 0;

padding: 0;

}

#mbtnav li ul a {

width: 140px;

}

#mbtnav li ul ul {

margin: -25px 0 0 161px;

}

#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {

left: -999em;

}

#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {

left: auto;

}

#mbtnav li:hover, #mbtnav li.sfhover {

position: static;

}

#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {

background: #b0d730;

width: 120px;

color: #566E09;

display: block;

font:normal 15px normal;

margin: 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

z-index:9999;

border-bottom:1px dotted #333;

}

#mbtnav li li a:hover, #mbtnavli li a:active {

background: #FE7C03;

color: #000;

display: block; margin: 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

}

Drop Down Menu 3:

Code:

/*—– Drop Down Menu 3 —-*/

#mbtnavbar {

background: #FF0040;

width: 960px;

color: #000;

margin: 0px;

padding: 0;

position: relative;

border-top:0px solid #696A6B ;

height:35px;

}

#mbtnav {

margin: 0;

padding: 0;

}

#mbtnav ul {

float: left;

list-style: none;

margin: 0;

padding: 0;

}

#mbtnav li {

list-style: none;

margin: 0;

padding: 0;

border-left:0px solid #333;

border-right:1px solid #CB0133;

height:35px;

}

#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {

color: #fff;

display: block;

font:bold 14px normal; margin: 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

}

#mbtnav li a:hover, #mbtnav li a:active {

background: ;

color: #000000;

display: block;

text-decoration: none;

margin: 0;

padding: 9px 12px 10px 12px;

}

#mbtnav li {

float: left;

padding: 0;

}

#mbtnav li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 160px;

margin: 0;

padding: 0;

}

#mbtnav li ul a {

width: 140px;

}

#mbtnav li ul ul {

margin: -25px 0 0 161px;

}

#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {

left: -999em;

}

#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {

left: auto;

}

#mbtnav li:hover, #mbtnav li.sfhover {

position: static;

}

#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {

background: #FF0040;

width: 120px;

color: #fff;

display: block;

font:normal 15px normal;

margin: 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

z-index:9999;

border-bottom:1px dotted #333;

}

#mbtnav li li a:hover, #mbtnavli li a:active {

background: ;

color: #000000;

display: block; margin: 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

}

Drop Down Menu 4:

Code:

/*—– Drop Down Menu 4 —-*/

 

#mbtnavbar {

background: #F7F7F7;

width: 960px;

color: #000;

margin: 0px;

padding: 0;

position: relative;

border-top:0px solid #696A6B ;

height:35px;

}

 

#mbtnav {

margin: 0;

padding: 0;

}

#mbtnav ul {

float: left;

list-style: none;

margin: 0;

padding: 0;

}

#mbtnav li {

list-style: none;

margin: 0;

padding: 0;

border-left:0px solid #333;

border-right:1px solid #d9d9d9;

height:35px;

}

#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {

color: #000;

display: block;

font:bold 14px Georgia; margin: 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

 

}

#mbtnav li a:hover, #mbtnav li a:active {

background: #FFFFFF;

color: #000;

display: block;

text-decoration: none;

margin: 0;

padding: 9px 12px 10px 12px;

}

#mbtnav li {

float: left;

padding: 0;

}

#mbtnav li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 160px;

margin: 0;

padding: 0;

}

#mbtnav li ul a {

width: 140px;

}

#mbtnav li ul ul {

margin: -25px 0 0 161px;

}

#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {

left: -999em;

}

#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {

left: auto;

}

#mbtnav li:hover, #mbtnav li.sfhover {

position: static;

}

#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {

background: #F7F7F7;

width: 120px;

color: #000;

display: block;

font:normal 13px Georgia;

margin: 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

z-index:9999;

border-bottom:1px dotted #333;

 

}

#mbtnav li li a:hover, #mbtnavli li a:active {

background: #FFFFFF;

color: #000;

display: block; margin: 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

}

Drop Down Menu 5:

/*—– Drop Down Menu 5 —-*/

#mbtnavbar {

background: #efefef;

background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);

background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);

background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);

box-shadow: 0px 0px 9px rgba(0,0,0,0.15);

border-radius: 10px;

width: 960px;

color: #000;

margin: 0px;

padding: 0;

position: relative;

height:35px;

}

#mbtnav {

margin: 0;

padding: 0;

}

#mbtnav ul {

float: left;

list-style: none;

margin: 0;

padding: 0;

}

#mbtnav li {

list-style: none;

margin: 0;

padding: 0;

border-left:0px solid #333;

height:35px;

}

#mbtnav li a, #mbtnav li a:link, #mbtnav li a:visited {

color: #757575;

display: block;

font:bold 14px normal; margin: 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

}

#mbtnav li a:hover, #mbtnav li a:active {

background: #4b545f;

background: linear-gradient(top, #4f5964 0%, #5f6975 40%);

background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);

background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);

color: #fff;

display: block;

text-decoration: none;

margin: 0;

padding: 9px 12px 10px 12px;

}

#mbtnav li {

float: left;

padding: 0;

}

#mbtnav li ul {

z-index: 9999;

position: absolute;

left: -999em;

height: auto;

width: 160px;

margin: 0;

padding: 0;

}

#mbtnav li ul a {

width: 140px;

}

#mbtnav li ul ul {

margin: -25px 0 0 161px;

}

#mbtnav li:hover ul ul, #mbtnav li:hover ul ul ul, #mbtnav li.sfhover ul ul, #mbtnav li.sfhover ul ul ul {

left: -999em;

}

#mbtnav li:hover ul, #mbtnav li li:hover ul, #mbtnav li li li:hover ul, #mbtnav li.sfhover ul, #mbtnav li li.sfhover ul, #mbtnav li li li.sfhover ul {

left: auto;

}

#mbtnav li:hover, #mbtnav li.sfhover {

position: static;

}

#mbtnav li li a, #mbtnav li li a:link, #mbtnav li li a:visited {

background: #5f6975;

width: 120px;

color: #fff;

display: block;

font:normal 15px normal;

margin: 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

z-index:9999;

border-bottom:1px dotted #333;

}

#mbtnav li li a:hover, #mbtnavli li a:active {

background: #4b545f;

color: #fff;

display: block; margin: 0;

padding: 9px 12px 10px 12px;

text-decoration: none;

}

Leave a Reply

Your email address will not be published. Required fields are marked *