How to Create Multi-layered Drop down Menu using HTML and CSS

How Important is Drop down navigation?

If you surf regularly on web, you may have come across drop down navigation frequently. Drop down menu’s are great way to represent a website. If you have many categories in your website, drop down navigation is the best option to deal with. In this article we are going to learn how to create such navigation menu.

drop down menu

Creating the HTML part of Menu :

Drop down menus are created using lists. A list are wrapped under unordered list. Below is the code of HTML we are going to use.

<ul >

<li><a href=”#”>Home</a></li>

<li><a href=”#”>Contact us</a></li>

<li><a href=”#”>About us</a></li>

ul>

This is our basic navigation menu. It consists of 3 items. You can add more items as per your need. Now if you try how it looks in a browser  it will return a bullet list. To customize this you have to do some css.

HTML tutorials for absolute beginners : Understanding the basics

CSS part of the Menu :

 

Li : Individual item in our menu such as home,contact etc.

Li: hover ,li: active : When our mouse is on particular menu item

Li: link,li:visited : Individual menu item which has link

ul {

margin: 0px;

padding: 0px;

list-style-type: none;

overflow: hidden;

}

  • Ul  is Basic horizontal box of our menu

 

  • By doing margin and padding to zero we override if there are some default browser settings.
  • List-style-type: none hides the bullets

li {

float: left;

}

  • Li is Individual item in our menu such as home,contact etc.
  • Float left places each item to left in the ul box

a:link,a:visited {

border-radius: 10px;

font-family: “Trebuchet MS”, Arial, Helvetica, sans-serif;

color: #FFF;

background-color: #000;

text-align: center;

display: block;

padding: 5px;

float: left;

width: 100px;

text-decoration: none;

margin: 5px;

}

  • a: link and a: visited means the css rule applies to the menu items which have links.
  • Basically every menu item is linked to some page.
  • Here all the rules are applied  for single li.
  • Border radius property makes the border corners circular.
  • As we have set margin: 5 px there is a gap between two items

a:hover,a:active {

background-color: #F6F;

}

  • A: hover means when a mouse pointer is present on that menu item.
  • A:active means when a particular menu item is active or we are into it sub-menu.
  • Background-color property changes the background-color when we hover on menu.

In next tutorial we will learn about drop down menu in detail. If you have some doubts you can ask them in comments section. Share this post with your friends if you find it useful.

Leave a Reply