Saturday, September 7, 2013

CSS Drop Line Menu

There are various types of the menus available on the web. I wanted to learn and create a drop line menu.
A menu as shown in the image below:





When creating a menu always start with a simple HTML menu structure containing ul and li tags.
Following is the structure created for the menu. (The entire code is written on the jsfiddle, so you can change it as you like).

HTML


While creating a drop down menu we can set the
position:relative
but for Drop Line Menu set the
position: absolute

Following is the CSS used for creating the menu. I have included using the jsfiddle and its commented. If you have any doubts please leave a comment.


CSS

FINAL RESULT