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

  • Lolly

    Is there a way to center this entire nav menu?

  • Silke

    Hi Leev18,
    many thanks for the tutorial. I’ve adjusted the CSS and added a – #nav a:hover { color: #FFF; } to change the text color to white when hovering over the main (1. tier) menu. When moving over to the right to (over) the 2. tier, the text color in the 1. tier changes back to the up stage but the background color (li:hover) stays.

    QUESTION: How can I make the text color in the 1. tier stay white (a:hover) when moving with the courser over the 2. tier nav? Any help would be greatly appreciated.

    • http://leev18.com leev18

      try the following:

      #nav li:hover a {
      color: #ffffff;
      }
      #nav li:hover li a {
      color: #896B9F;
      }
      #nav li:hover li {
      background-color: #E7D8F9;
      }
      #nav li li:hover {
      background-color: #C097E5;
      }
      #nav li li:hover a {
      color: #ffffff;
      }

      • Silke

        Perfect! It works and looks great.
        Thank you so much for your help and quick reply.