Simple CSS Only Drop Down Menu

Everyone might have gone through a phase where we feel that creating a multi-level navigation menu is a bit hard job to do. Not to worry, in this post we will explain the simplest multi-level drop down navigation menu; just using HTML and CSS only, no javascript, no JQuery. Well, lets start the code…

The main HTML

Ok, we are done with the HTML code containing items for a drop down menu. In this HTML code we have two sub-level menus (i.e. top level [Web] -> second level [Hosting] -> third level). There are two things to be noticed:
* <nav> </nav> tag is not really needed; but might be helpful when we want to position/ decorate the navigation menu with our web page, etc.
* starting point of the second level sub menu (line no.6) and point of third level (line no.10).

Now, we look at the CSS

As an usual start, we define the font family, size, color, margin, padding, etc. Then. < ul > for list style as none, because we do not need any bullets for the list (line no.5). Further, for < li > within the < ul > set float to left so that we get our list in an horizontal display, 1 pixel padding for some breathing space (its a good practice to do), and position set to relative (normally, we don’t see any changes on position). Others its simple to understand.

Let me come to the main area of interest, at line no.18 we see li > ul means the child of li tag i.e. ul, the second level of the menu is hidden by the display property ‘display: none’ and position is set to absolute because its going to float above the first level of menu. Continuing, we set the left and top offset to position the second level of the menu and this is where the ‘position: absolute’ works along with the offset set.

As progressing, we set the ‘on hover’ display as block. Further, the child of li tag ul for the third level of the menu is defined in the line no. 24 and 27. Finally, to highlight the item through which the sub-menu is reached, we apply, ‘on hover’ to li and apply style to the anchor tag that lies inside the li (line no.30).

Its all done and works perfectly on most decent browsers.

This is tested and works in: firefox 4+google chromemicrosoft IE 8

<<view demo>>

Thanks for reading this post and as usual, I’m open to suggestion and critics (positive of course).
Do comment on!



Share

Post Author: Shreyo

is a developer & involved in project management; loves to learn, guide and keep himself updated on UI/UX and WordPress. He is also an amateur photographer mostly macro shots.