Simple dropdown menu tutorial for budding web developers

  1. Previous
  2. Next
  3. Recent

    1. Signs 'He' May be Cheating on You
    2. 7 Vows of Hindu Marriage - Know What 'Saat Vachans' Mean
    3. RuPay vs Visa vs Mastercard vs American Express- A Comparison
    4. What is RuPay? Everything You Need to Know About India's Domestic Payment System!
    5. Top 10 Online Portals to Find a High Paying Job in India
    6. Top Indians who Revolutionized the IT Sector in India
    7. 8 Initiatives by Narendra Modi that Could Change the Future of the Nation
    8. 8 Work-from-home Jobs for Housewives, Students, and Part timers
    9. Complete Company Registration Process in India - Explained
    10. Change Name in India in 5 Steps - Filing Affidavit, Newspaper Ad & Gazette Notification

Drop-down menu is one of the first thing that a budding web developer tries to make. This is a simple thing yet some find it difficult to understand. I felt the same when first started.

So today we’ll create a drop-down menu using CSS. We used some images to help you better understand the entire thing.

Our finished menu would look like this. You can always do customization to amplify its performance and appearance.

Step-1 (HTML Code)

We first create menu and submenu items. These are all placed in a list. Carefully see the list and sub-list inside them,

simple drop-down menu tutorial

Now go through the HTML code written below,


<ul id='my_list'>

 <li><a href='#'>Menu Item1</a></li>

 <li><a href='#'>Menu Item2</a>
 <ul>
 <li><a href='#'>Menu Item21</a></li>
 <li><a href='#'>Menu Item22</a></li>
 <li><a href='#'>Menu Item23</a></li>
 </ul>
 </li>

 <li><a href='#'>Menu Item3</a></li>

 <li><a href='#'>Menu Item4</a></li>

 <li><a href='#'>Menu Item5</a>
 <ul>
 <li><a href='#'>Menu Item51</a></li>
 <li><a href='#'>Menu Item52</a></li>
 </ul>
 </li>

 </ul>

Step-2 (CSS Code)

Next step is to add CSS code that provides it the appearance and drop-down feature. Here is the code,


<style>

 ul#my_list
 {
 list-style:none;
 }

 ul#my_list li
 {
 float:left;
 }

 ul#my_list a
 {
 text-decoration:none;
 background:#3090c9;
 border:1px solid #1E84C1;
 color:white;
 padding:5px 20px 5px 20px;
 font-family:Georgia, Tahoma;
 font-size:13px;
 }

 ul#my_list a:hover
 {
 background:red;
 }

 ul#my_list li ul
 {
 display:none;
 position:absolute;
 padding:0px;
 padding-top:3px;
 }

 ul#my_list li ul li
 {
 clear:both;
 }

 ul#my_list li ul li a
 {
 display:block;
 }

 ul#my_list li:hover ul
 {
 display:block;
 }

 ul#my_list ul li
 {
 width:150px;
 }

</style>

Of the entire CSS code, a few lines are important for providing the drop-down effect to the menu. Once you’ve thoroughly seen the code, look at this infography,

explaining css code for drop-down menu-1

You can download the code and see how it actually works.

blog comments powered by Disqus