A Simple Drop Down Menu
207 Flares 207 Flares ×

Now a days I have been experimenting with CSS3 features, with some advanced CSS3 selectors we can easily Create a Drop Down Menu with pure CSS without using any fancy background images and JavaScript.

In this tutorial I will explain step by step procedure to create a simple drop down menu  with pure CSS.

Here is the Simple Drop Down Demo.

A Simple Drop Down Menu

A Simple Drop Down Menu

HTML Drop Down Menu Structure:

First we will create HTML structure

 

The HTML structure as follows

 I created two sub Menus for Articles and Archives, these sub menus can be shown once the parent menu liks is activated by HOVER.

And under Articles>Web Design I have sub-sub-menu (HTML and CSS) this links are shown horizontally from the first drop down as shown in Drop Down Menu.

CSS Code For Drop Down Menu:

Now we will write the CSS for the HTML code.

 

First we will hide the first set of sub links Articles>Web Design,Fun,Freebies and Archives>January,February using “display:none”  attribute. and to make them appear we have to change the “display”  attribute to “block” on HOVER of LI.

The child selector  > make sure only the child UL of LI are visible rather than all other UL elements or other sub menus.

Here is the Demo

Drop Down Menu Elements

Drop Down Menu Elements

And in next step few lines of CSS code to make it look like Menu

 

First we will remove bullets for list elements by adding “list-style:none” to “nav ul” element. And “position:relative”  attribute will allows us to position sub menu elements according to the Main Menu. “display:inline-table” attribute allows us to display main navigation elements to display as an inline-table.

I have added padding to anchor elements to separate links and I removed decoration (underline for anchor elements) with  “text-decoration:none” attribute.

To make it look like Menu side by side I added “float:left” attribute to LI elements.(Main Navigation Bar)

For Drop Down elements I added “float:none” attribute to “nav ul ul li” and also “position:relative”.

Here is the Demo.

Drop Down Menu Sample

Drop Down Menu Sample

Now it has a look of Drop Down Menu But as you move from one link to other links the elements are dancing from right to left and also secondary sub menu elements are directly appearing below the LI elements. To fix this we will add few lines of CSS code

 

For first  sub-menu elements I have added “position:absolute” and “top:100%”. So the drop down elements will appear directly below to the relative parent LI.

And For Secondary sub-sub-menu  I have added “position:absolute” attribute and “left:100%”. So the drop down elements will appear exactly right side of the relative parent LI element.

Here is the Demo.

Drop Down Menu Sample

Drop Down Menu Sample

The logic part is completed now we will apply some styles and colors to Make it stylish Drop Down Menu as shown in the first Demo.

I have used few CSS3 features like gradient etc. The code is simple and easy to understand, added color to main navigation menu and then on HOVER changed the colors. Here is the code.

 

I tested it in almost all modern web browsers working fine.If you face any issues let me know.

Here is the Final Demo

Demo For Drop Down Menu

I hope you enjoyed this article If so share with your friends and also subscribe to my blog and connect me at social networks.

Author : Arunkumar Gudelli

I am a Simple Guy, Standing Infront of the World, asking you to Follow Me.
Don't miss any posts from Me,Subscribe to the RSS Feed.
You can connect me via @twitter or @facebook or Google+ or e-mail.

Loading Facebook Comments ...

Leave a Reply

207 Flares Twitter 12 Facebook 6 Google+ 181 LinkedIn 8 StumbleUpon 0 Reddit 0 207 Flares ×