LearnHow to Create a Simple CSS Dropdown Menu

Guil Hernandez
writes on January 21, 2015

Many dropdown menus we see on websites use JavaScript in some way, but it’s possible to build one entirely with HTML and CSS. In this short video tutorial, we’ll take advantage of helpful CSS selectors to build a simple dropdown navigation menu.

Download Project Files

If you’d like to learn more about HTML and CSS, check out our guided path of Web Design courses now available at Treehouse!

21 Responses to “How to Create a Simple CSS Dropdown Menu”

  1. jethin on March 6, 2017 at 11:53 pm said:

    i had applied this dropdown menu .. everything works fine.. its working perfectly in IE,chrome nd all but.. error in opera.. pls help

  2. Stu Cowley on November 15, 2016 at 9:21 pm said:

    Yet another amazing video by Guil! Why isn’t this video in the library as a workshop? It is so handy!

  3. Hasina Akhter on October 19, 2016 at 2:42 pm said:

    Hi Guil

    thanks for this wonderful lesson. I applied this on my site. However I cant connect the drop down menu pages to the main menu.
    here is my code:

    hi
    hello
    welcome

    welcome p2
    welcome p3
    welcome p4

    I have created a dropdown menu page such as welcome page2.html. When I click on it I can see it. But when I click on main menu welcome page and then click its submenu page welcome page2.html- nothing I can see.

    Please help me.
    Thanks.

  4. Gathiu Wangari on May 2, 2016 at 1:45 pm said:

    Pretty simple and comprehensive!

  5. Ro_Ko on January 8, 2016 at 3:31 pm said:

    Thank you so much for posting this free tutorial! It is a great help and puts all other pure CSS nav dropdown menus that I have seen in the past to shame.

  6. preshith on December 29, 2015 at 10:10 am said:

    thanks a lot

  7. Vijay on November 25, 2015 at 7:45 pm said:

    How can i position the navigation to the left?

  8. tudo sobre fuxico artesanato on October 22, 2015 at 5:01 am said:

    Para fazer a florzinha basta ir costurando a sianinha em
    círculos na base de feltro.

  9. release on October 18, 2015 at 10:33 pm said:

    thank you for sharing. its very importand. i have tired learn to make dropdown menu just with css

  10. John on October 17, 2015 at 2:36 am said:

    Hi, thanks for this tut, it’s really helpful. Can you tell us how to apply transitions on it?

  11. feroz on September 21, 2015 at 1:51 am said:

    classy 🙂

  12. Zack Betz on September 19, 2015 at 2:50 pm said:

    Thanks for this, Guil! This was my first time to use Unicode Triangles, cool stuff. Quick question: was the video for the responsive / mobile-first version of this menu ever made?

  13. sami khan on August 25, 2015 at 9:30 am said:

    thank a lot bro

  14. Bagus on August 12, 2015 at 6:38 am said:

    hey so simple ya i will use this code in my web..
    my web still under contruction

    thank Guil

  15. Website Design Company on January 31, 2015 at 5:06 am said:

    Drop-down menus using JavaScript are common. But creating one with CSS and HTML is new and better. Thanks for the great tutorial. Every website design company would cherish it.

  16. 21coders on January 24, 2015 at 11:59 pm said:

    Generally I go with javascript, now I will try this method. Thanks for the tutorial mate.

  17. swathi bhatiya on January 22, 2015 at 2:29 am said:

    Hi,
    Thanks for posting this….Much informative post..I have been trying many template designs but does not achieving that much perfectness as that professional web design company(http://cedarsolutions.in/ ). It had been great helpful.Keep posting such information.

  18. Kevin Lozandier on January 21, 2015 at 4:41 pm said:

    Wouldn’t an all CSS one that can be vertical and horitizontal changeable through just CSS would be better for the sake of progressive enhancement and accessibility reasons.

    An example can be found here I did in Sass based on who I’ve learned it from a long time ago (WAI-ARIA attributes & variables omitted): http://codepen.io/lozandier/pen/KwbmB

    • Kevin Lozandier on January 21, 2015 at 4:42 pm said:

      Oh, nevermind I got catfished that this needed JavaScript by the Twitter link referring this article that said something about one line of JS to create a dropdown menu…

  19. Abital Deng on January 21, 2015 at 1:22 pm said:

    Thank you for this free tutorial i really enjoyed it.

Leave a Reply

You must be logged in to post a comment.

Want to learn more about CSS?

Learn how CSS allows you to apply visual styling to HTML elements with colors, fonts, layouts, and more.

Learn more