CSS Only Dropdown Menu: CSS Tutorial (Day 27 of CSS3 in 30 Days)

Create a simple Dropdown Menu with CSS!

⭐️Files you need ⭐️
💻Dropdown Menu Code: https://www.dropbox.com/sh/mr0ptf3zlsnhfk0/AABnf7835rJEevD2EBdMBH77a?dl=0
💻All tutorials in this series need this “_theme-styles” directory (only download once): https://www.dropbox.com/sh/890hx6ke34oovaz/AAByJ-jb-H5pWuIUx7t_GvQqa?dl=0

This video works as a stand-alone tutorial but is also day 27 of CSS3 in 30 Days. For the rest of the series, check out this playlist: https://www.youtube.com/playlist?list=PLWKjhJtqVAbl1AfjiGyYxwpdAPi5v-1OU

CSS3 in 30 Days is developed by Brad Hussey. Check out his website for more great tutorials: https://codecollege.ca/

Learn to code for free and get a developer job: https://www.freecodecamp.org

Read hundreds of articles on programming: https://medium.freecodecamp.org

And subscribe for new videos on technology every day: https://youtube.com/subscription_center?add_user=freecodecamp


This Post Has 27 Comments

  1. Bhavika Kapadia

    I am wondering what is next series after css. Can I expect JavaScript??

  2. Ian Laycock

    Thumbs down for the singing 😂😂😂 turn off the auto tune. Sounded much better at the beginning 👍

  3. Trex_ son

    Can you work on a diagonal coordinates animation, I once saw a script in java script that allowed a user to click an item and a small image of that item slides diagonally along the screen to the shopping cart. I have tried implementing it with css to no avail. Can you look into that and include it into the project.

  4. Denis Toledo

    Nice ending =) Thanks a lot for the golden content so far.

  5. yutao Wang

    thanks and where is the code of Day 26 , the link is wrong

  6. pUArro

    It`s high time to switch on VScode))


    is there any css3 properties in this dropdown menu video?
    I expected you might used ::before and ::after to get icons in each and every menu

  8. Barry Allen

    Was that song not a hit for Big Mountain? Lol. UB40 are great though. Love the video series too 👍🏼

  9. Chris Jordan

    Hi Guy's
    please can anyone help code CSS 34 in one I am in Mozambique
    can copy and to my email :
    I use HTML

  10. sushama honna

    Thanku.. Could u plz help me, how to increase only the dropdown width of input control for firefox browser. I want input cpntrol width is less than the dropdown width.. I am having this issue for firefox browser only. Plz help

  11. Business Opportunity in Ruvol

    I have invented a Board Game [still unpublished and not yet out in the market] that I believe is guaranteed to be as challenging and exciting as CHESS. I called it “RUVOL.”

    It is my hope that one day Ruvol may surpass chess as the “Number One Board Game in the World.”

    The weakness of chess is it always starts in fixed positions that the opening moves become “memorizable.” In fact, not a few have so mastered the moves that they can play against their opponents “blindfolded.” It is for this very reason that the great Bobby Fischer introduced his so-called “Fischer Random Chess,” where the starting position of the pieces is “randomized” to make the memorization of openings impracticable. Fortunately, it is also for this reason that I invented Ruvol where “every game” has been calculated to be a challenging one to play.


    I detailed everything in my YouTube video. Here is the link: https://www.youtube.com/watch?v=jcqth0m3-R0


    It is worthwhile to note that the people who play chess will be the same people who will play Ruvol. In my Google search, I learned there are around 800 million chess players in the world. Even just a small percentage of these 800 million is good enough to earn big money from Ruvol either as an ONLINE GAME BUSINESS or as a PHYSICAL PRODUCT DISTRIBUTOR.

    You may contact me at: rodolfovitangcol@gmail.com.

    Thanks and God bless!

    The Ruvol Inventor

  12. Woof Code

    I LOVE UB40 man! Dude you can sing 😉 And great content too. Thank You!!!

  13. okibe ogomola

    😄😄😄 I literally laughed throughout the learning process thanks a ton!!

Leave a Reply