How to Create a Drop Down List in Blogger

Thinking of organizing your blog topics into submenus? Then you might want to consider designing your blog by creating a drop down list or menu. Creating a drop down list will help you achieve a more organized and neat looking blog. These steps were made simple for your convenience and to save your time searching for another sites.

Below are very simple steps on how to create a drop down list on your blogger:

Step 1. Go to your "Layout" settings.





Step 2. Click "Add a Gadget".





Step 3. Choose the "HTML/JavaScript".





Step 4. Copy and Paste the code below, and click "Save".



Code:

<ul id="Dropdown">
<li><a href="#">Home</a></li>

<li><a href="#">Dropdown 1</a>
<ul><li><a href="#">Dropdown</a>
</li><br />
<li><a href="#">Dropdown</a></li><br />
</ul>
</li>

<li><a href="#">Dropdown 2</a>
<ul><li><a href="#">Dropdown</a>
</li><br />
<li><a href="#">Dropdown</a></li><br />
<li><a href="#">Dropdown</a></li><br />
</ul>

</ul>

Step 5. Now you have saved your code, click on "Template" settings.





Step 6. Select "Edit HTML".




Step 7. You will be prompted by a message to edit your HTML code. Just click on "Proceed", it is also practical to back up your template.



Step 8. Find the highlighted word with special characters. You may also hold on ctrl+f and find "skin". Above the highlighted word, Copy and Paste the code below:



Code:


#Dropdown,
#Dropdown ul {
list-style: none;
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
#Dropdown {
float: left;
}
#Dropdown > li {
float: left;
}
#Dropdown li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#Dropdown ul {
position: absolute;
display: none;
z-index: 999;
}
#Dropdown ul li a {
width: 88px;
}
#Dropdown li:hover ul {
display: block;
}

Step 9. It should look like this. Make sure to put the code above the ]]><b:skin>.




Step 10. Save your template by clicking "Save Template" on the lower right corner of the screen. That's all, you have successfully added a drop down list on your blogger.

See the result:



Just change the '#' with your link.

This code is responsible for the drop down list.

<ul><li><a href="#">Dropdown</a>
</li><br />
<li><a href="#">Dropdown</a></li><br />
<li><a href="#">Dropdown</a></li><br />
</ul>






Note: If you have any suggestions regarding in what to post or problems you have encountered related in my topics, feel to contact me at my email listed in "Contact us" tab. I will make sure to reply with your concern within 24 hours.