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
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
No comments:
Post a Comment