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.

27 thoughts on “Simple CSS Only Drop Down Menu

  • snoep

    (April 5, 2012 - 10:07 pm)

    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.

  • Eleonara

    (April 13, 2012 - 11:14 pm)

    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

  • Amália

    (April 14, 2012 - 3:46 am)

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

  • Afonsina

    (April 15, 2012 - 3:47 am)

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

  • Cassiana

    (April 17, 2012 - 9:10 pm)

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

  • Cleci

    (April 20, 2012 - 1:55 am)

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

  • Aila

    (April 25, 2012 - 11:50 pm)

    interesting post. thank you for sharing!

  • Andresa

    (April 26, 2012 - 12:30 am)

    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

    (April 28, 2012 - 4:21 pm)

    thanks for posting this information.

  • Adrize

    (April 29, 2012 - 6:41 am)

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

  • Almerinda

    (April 30, 2012 - 8:22 pm)

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

  • Emily

    (May 1, 2012 - 7:18 pm)

    great job. keep it up.

  • Deodora

    (May 2, 2012 - 11:51 pm)

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

  • Alcione

    (May 3, 2012 - 3:16 am)

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

  • Ermelinda

    (May 7, 2012 - 6:39 am)

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

  • Aléxia

    (May 7, 2012 - 2:58 pm)

    i hope every newbie like this article.

  • Alexsandra

    (May 7, 2012 - 6:40 pm)

    thanks for posting this information.

  • Albertina

    (May 7, 2012 - 7:33 pm)

    hey friend, thanks for helping me and the others.

  • Belinda

    (May 8, 2012 - 12:24 am)

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

  • Carminha

    (May 17, 2012 - 10:52 pm)

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

  • Mandi

    (May 18, 2012 - 9:20 am)

    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: http://www.linklegends.com/free-trial. 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.

    • Shreyo

      (May 18, 2012 - 2:33 pm)

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

  • Vanessa Iseley

    (June 6, 2012 - 10:28 pm)

    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.

  • Cheap Social Bookmarking Service

    (June 17, 2012 - 7:39 am)

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

  • Ariadne

    (July 11, 2012 - 5:35 pm)

    thanks for such a great post and the review,

  • Elvira

    (July 12, 2012 - 1:02 am)

    thank you for the info, it really helps.

  • SelvaKumar1

    (April 30, 2013 - 12:26 pm)

    Nice Work Shreyo .. Keep going ..

Leave a Reply

Your email address will not be published. Required fields are marked *