Insert Drop Down Menu In Blogger

The term drop-down menu (also dropdown menu or dropdown list) refers to a graphical control element, similar to a list box, which allows the user to choose one value from a list. It helps to organise content effectively, besides it looks attractive too. Today, I am sharing with you some tips to add a Drop Down menu to your blog. Just go through the article and follow simple steps. At the end, you will get a beautiful drop down menu.

Step1: Go to Template -> Edit HTML

Step2: Press Ctrl+F(Find Box) and search </header> in it.

Step 3: Copy & Paste the HTML code given below, just below </header> (If you want to place drop-down menu somewhere else you could place code there as per your requirement). You can edit and replace highlighted texts with your own titles. Also you have to add links corresponding to title by replacing # for each title.

<nav>
<ul>
<li><a href='#'>Main Title 1</a></li>
<li><a href='#'>Main Title 2</a>
<ul>
<li><a href='#'>Sub-title 1</a></li>
<li><a href='#'>Sub-title 2</a></li>
<li><a href='#'>Sub-title 3</a>
<ul>
<li><a href='#'>SSTitle1</a></li>
<li><a href='#'>SSTitle2</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>Main Title 3</a>
<ul>
<li><a href='#'>Sub-title 1</a></li>
<li><a href='#'>Sub-title 2</a></li>
</ul>
</li>
<li><a href='#'>Main Title 3</a></li>
</ul>
</nav>

Step 4: After adding this you would get preview like this. So far this leaves us with neat layout of links with sub-titles having clear relation to their main title.

Step 5: Save Template.

Step 6: Now, Go to -> Template -> Customize -> Advanced -> Add CSS.

Step 7: Add the code given below in CSS window.

nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
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);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
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%);
}
nav ul li:hover a {
color: #fff;
}
nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
display: none;
float: right;
position: absolute;
top: 100;
z-index: 99999;
}
nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
nav ul ul li a:hover {
background: #4b545f;
}
nav ul ul ul {
position: absolute; left: 100%; top:0;
}

Congrats!! You have done. Now, visit your webpage and see how your drop down menu appearing.