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!


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.
  • Woah this weblog is wonderful i love studying your articles. Stay up the great paintings! You already know, many people are searching around for this info, you could help them greatly.

  • great post! i am just starting out in community management marketing media and trying to learn how to do it well – resources like this article are incredibly helpful

  • just wanted to comment and say that it is a very interesting post.

  • Afonsina

    the shared info is pretty helpful for professionals. thanks for sharing.

  • maybe if you write more about this subject, i will understand it clearer.

  • Cleci

    found a lot of great points in this post, nice work.

  • Aila

    interesting post. thank you for sharing!

  • Andresa

    your blog article is very interesting and fantastic, at the same time the blog theme is unique and perfect, great job. to your success.

  • Betânia

    thanks for posting this information.

  • Adrize

    an interesting article indeed! of course, with lots of things to reflect upon.

  • Almerinda

    this is a cool stuff, keep on adding the information.

  • Emily

    great job. keep it up.

  • Deodora

    your blog looks good. have a nice day. the blog was absolutely fantastic!

  • Alcione

    would be great if we could read your blog posts everyday. congrats for the hard work.

  • Ermelinda

    thanks to your post i can solve some of my problems, thank you.

  • Aléxia

    i hope every newbie like this article.

  • Alexsandra

    thanks for posting this information.

  • Albertina

    hey friend, thanks for helping me and the others.

  • Belinda

    as always an excellent posting. the way you write is awesome. thanks. adding more information will be more useful.

  • Carminha

    really nice blog, very informative. thanks dude for wonderful posting. keep it up in the future as well.

  • This is a comment to the admin. I came to your “Simple Drop Down Menu” page via Google but it was hard to find as you were not on the first page of search results. I see you could have more visitors because there are not many comments on your site yet. I have found a website which offers to dramatically increase your rankings and traffic to your website: I managed to get close to 1000 visitors/day using their services, you could also get lot more targeted visitors from search engines than you have now. Their free trial and brought significantly more visitors to my website. Hope this helps 🙂 Take care.

    • thanks for your kind gesture! i’ll step on… 🙂

  • Hi there, You have done a great job. I will certainly digg it and personally suggest to my friends. I am sure they will be benefited from this web site.

  • BIYrLO Really enjoyed this blog article.Really thank you! Great.

  • Ariadne

    thanks for such a great post and the review,

  • Elvira

    thank you for the info, it really helps.

  • SelvaKumar1

    Nice Work Shreyo .. Keep going ..