Basic & Pure CSS Drop Down Menu

For those who are new or are just wanting to learn how to create a CSS drop down menu, take a look various type of CSS drop down menus below. They’re all purely made with CSS and HTML codes only. No JavaScript, Flash, or Image were used. The looks and colors can always be change later in the CSS style code. Hover your mouse over over them and try them out.

- Click on the Download Codes to view and download the codes.
- Click on Edit to edit the codes for yourself, which will take you to jsFiddle.

Note: The round ones will not display correctly in Internet Explorer 8 and below version. Internet Explorer 8 is a seriously outdated browser anyway.



  • ken

    nice work here.really helped me

  • guilherme_mello

    Thx man!

  • Marshall

    I have a question on formatting. I have a lot of items under these dropdowns and I don’t want people to have to scroll down to view them all. Is there and way to make a new column after every 8 dropdowns? If you could help me out that would be great, these are great dropdowns by the way.

  • Don Lynn Campbell

    Works fine in FF and Chrome but on IE 10 dropdown will not stay on screen after the second item http://www.fw.ucalgary.ca/campbeld/mexico/Chapter_60.html

    • Your friendly IT guy

      Don’t mind IE no one is using that browser anymore :)

  • Mahasen A Elmonem

    hey
    the drop down menus are great but I am unable to add any subheadings to my menu , can u help me plsssssss

  • jayesh

    nice