How to Create an HTML Dropdown Menu | Learn HTML and CSS | HTML Tutorial | HTML for Beginners 

NEW UPDATED 2023 COURSE AVAILABLE! 🙂 You can find it here: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-v8jDnBYc0bs.html&ab_channel=DaniKrossing

the reason you have so many subscribers is: not only are you an awesome instructor BUT you also make your screen big enough to SEE what you're doing; even on a mobile device... other programmer instructors please take notice...!!! Excellent video!!!!

There's a lot of "tutorial videos" out here but none explains as clearly as this guy. Thanks a lot man

I can't find a good and clear tutorial about HTML dropdown and I only got a 2 days deadline before I pass my project. Man you actually saved me from my grade 11 thesis thanks a lot, keep it up.

This is a great tutorial! I appreciate you taking the time to clearly explain things step-by-step. Cheers

I cannot thank you enough, this thing helped me get extra points on my project. No one in my class did this. thank alot!

When you need to search on youtube because your college teacher want you to do a site that uses it even though he never really told you how things even work.

many have been called for the teaching but few have been chosen to give out the real content as far as online tutorial is concerned, THANK YOU SIR DANI

Great tutorial. Many thanks. What worked better for me, though, was giving 'position: relative' to 'nav ul' instead of 'nav ul li'. It helped me with positioning the drop down part of the navbar which has 'position: absolute'.

I've been struggling with the dropdown menu for days. You make it so easy to understand! Thank you very much! Really appreciate it!

This is the best, the most instructive, and simplest tutorial after searching online this kind ones!

thank you so much brother, im just teaching myself html5, css and stuff and this was really confusing me till i watched this video your an absolute legend.

Thank you for your precise and concise directions. Extremely helpful in helping me understand drop downs. Thank you.

Thank You!! Excellent tutorial on this topic. I had already muddled through and created one with information I gleaned from several web sights. Yours much more logically put together and aligns much nicer than mine. I had to use negative px padding in spots to get mine to line up correctly. I successfully played with "transition: all 500ms ease;" in the "nav ul li" and "nav ul li a" styles to soften the movement of the mouse along the menu. Setting the height in the main to 'auto' will auto adjust the nav height should the browser window get scrunched in the Y-direction.

Thank you a lot man! I have been struggling to do it myself, and as I am still inexperienced, I used bunch of divs and id's and whatnot, and it was a complete mess when I have tried achieving hover effect correctly. Your video has shown me parent->child relationship pretty clearly and simple and now I have completed my task for college successfully and I feel so happy now! c:

Great tutorial. For me it's the best on youtube and I've seen a lot of those drop down menus. This one is straight forward, simple and clean code.

Really good, easy-to-follow video and it teaches you exactly what it says it will so very practical. Thanks for posting it!

Thank you for the walkthrough. It was what I needed to complete a rather extensive dropdown menu.

Another great video I found! When I’m really struggling with a project, you are my go to guy. I love your channel.

Thank you so much for doing this tutorial! It by far was the easiest to follow and I'm very happy to say, I am able to get the exact results I was looking for.

You're amazing thank you, I really like how you explain how the whole HTML and CSS work while building the drop-down menu and the reason why you've added those values. Cheers

I have seen around 10 diff top listed videos And yours is the best now I dont need to watch anyone else’s video to understand styling drop down menus Best teaching skills

Yes it's true. You are explaining really well, without hiding. You make your students from zero knowledge to well informed.

Amazing - i have seen folks doing it with tons of html class , buttons, js efc. You came here without all this mess and knock it out beautifully

Thanks! I will be adding links to your playlist on my website!

Thank you very much for the thorough, concise and working tutorial! After watching about 9 other videos that quite didint work for some reason, everything in yours did! Thank you again!

You are the best lecturer I have seen big up bro

Thank you. Do you repeat the exact process if you have multiple drop-down menus within your nav?

Can you put a dropdown menu inside of a dropdown menu? When you hover over the nav bar, and the first dropdown menu appears, can you then hover over that dropdown menu to get another dropdown menu?

This was a lifesaver! You explained everything so clearly! Thank you!!

you´re the best instructor i´ve even seen on all youtube, good video i love your way to teach.

You are awesome Dani! Thank you my friend. You are such a great teacher as you explain it very well.

omg thanks you for this video. i was worried about the dropdown menu thank you very much.

Awesome tutorial! So easy to follow and understand. Many thanks!

This was exactly what I was looking for! Huge thanks to you!!!

A lot of 'ul', 'li' 'ul', 'li' 'a', 'ul', li's to keep track of. That's why div's are preferable. Otherwise, very clever. Now I have to figure out how to add the hover feature to all of the menu items.

"nav ul li ul li a { }" , my head hurts

YOU ARE THE BEST I DID NOT UNDERSTAND IT FROM ANYONE ELSE

Really Glad I can do this! Thanks! One thing though, a slightly lighter background image would make it easier to see the black letters in the dropdown menu before they get a white dropdown background.

after watching lots of videos... i finally understood the whole concept.. thanks so so much man

FANTASTIC and Detailed instructions! Very Nicely Done! Bravo, Bravo.

This is really helpful. Thank you so much for yet another awesome tutorial!

This helped a ton in getting the results I desired! Great tutorial!

I had to use "display: inline;" on the "li" to get the links to flow horizontally, other wise they would float left but still be vertical on top of eachother. Can someone explain?

This channel has the best tutorials for web development ! explanations are always clear

can this work on a navigation bar which has been centered on the webpage instead of float:left;? my drop down menu is not going vertically but horizontally instead and its not directly underneath as well :(

thank you thank you thank you! I was trying to make one for ages, and finally managed to make a sticky dropdown with this! Your commentary was extremely helpful! I am looking at various tutorials to make this responsive, any tips?

How can I add a logo instead of a text in the line above the ? I want to do this with CSS as background in the top left corner but somehow it does not work.

great video, i've watched a lot and yours is the the best one. it's simple, well explained, thanks a lot!

Heavy duty CSS ... He makes it look so easy!

alo hvala bruda pune jako!!!!

wow .. its awesome. I created a dropdown along this video. 😄

Very clear and understandable video. Thank you very much for this great tutorial.

OMG this is literally the best thing ever THANK YOU SO MUCH!!!!!!!!!!!!!!!!!!!!

Thank you so Very Much!!!! You made this understandable and I now know how to do this.

You just saved my mid-term grade. Kudos to you my good sir.

thank you very much, you're a life saver! I've tried many ways to do it, this is the one that works for me.

You are a genius in terms of explaining. Very nice.

First of all, your tutorials are amazing and really helpful! When trying to write this code Upon moving the cursor onto the drop down menu the background color is not changing. Can you please let me know if i have made a mistake somewhere? Here's my CSS code: *{ margin:0; padding:0; } body{ background-image: url(IMG/bg.jpeg); } nav{ width: 100%; background-color: white; height:60px } nav p{ font-family: impact; font-size:50px; line-height: 30px; float: left; padding: 10px 20px; } nav ul{ float:left; list-style-type: none; } nav ul li{ float: left; list-style-type: none; position:relative; } nav ul li a{ display:block; font-family: helvetica; font-size:20px; padding: 20px 35px; text-decoration: none; } nav ul li ul{ display:block; position: absolute; background-color: white; } nav ul li ul li a{ padding: 8px 30px; } nav ul li ul li a: hover { background-color: #999; } here's my HTML code: DESIGN ENCLOSURE Home Services Digital Marketing Logo development Product Photography Projects doccuments

I have watched this video 5X. Thanks Mr. Dani

Good insturctor i watched many videos and i don't understand anything you're explain clearly thankz teacher for help us

Finallyyyyyyyy!! I did it..!! After 3 damn days, it was possible to make a drop-down menu. Thank you so much, sir!

Nice effect. Thank you for your clear explanation.

How to create wordpress drop down menu?

Absolutely brilliant... thanks for making this so easy😃

Excellent explanation and this video is way much better than my useless professor at school....

now i can expand my little knowledge about coding html, thanks!

Thanks for this awesome video why I am calling this awesome is because it is not only written at a quick pace but just every single thing is explained and if we want to just change something it is said that it is your preference. I got a lot, thank you for making this video, your style of teaching is like my teachers who always explains everything he teaches

All I wonder is told in last 2 minutes. =) Thanks..

A very detailed step by step video. Thank you very much~

Nice tut, thanks. What about a dropdown menu responsive?

very well and simply explained. thanks

for some reason when i try to make a dropdown without have a tag in the nav it wont work

if I highlight entire area - on rounded corner of dropdown menu, how to get highlight to conform corners of the last nested item?

You're an angel.. thank you !

Perhaps a bit quick for a beginner like me. The copy and paste at times were confusing, especially when a whole section is copied and then 95% of it deleted as only one line was required. Other than that, it is a most informative video.

thanks : ) out of all the last tutorial I have watched yours is the simplest

Thank you so much for explaining each and everything very clearly.

Now I feel like a pro since I made it fancier than in the video :D animations etc. and overall looks

This is really HELPFUL!!! :3 :) LIKE

mannn thank you a lot you know i was search about how can i do that so finally i learn how can i do it thanks man

hey thank you so much! i appreciate you not declaring any IDs or Classes, it makes it much easier to understand what each part needs to be stylized with what!

Thank you!! Very easy to follow and I have created an amazing Dropdown Menu.

the best html css tutorial ever!!!!

Clear explanation... Thank you very much.

Wow thank you so much for your explanation such a useful tutorial 🙏🏻

Another amazing video. I am working on my portfolio page for free code camp. Am definitely going to use this.

That is a great tutorial which I've ever seen! I need this because I am making a website for my brother about online shopping. Thank you!

Thank you so much for these great tutorials, I have learned a lot watching your videos. I can`t get rid of one problem though: If I add a background color to the dropdown menu, the background color covers the header and the "portfolio"-txt disappears.

You are great teacher.

You explained this video so good. Best tutorial on dropdown.

The best tutorial ever seen

Thanks for this tutorial it was so great! You are a fantastic instructor.

Excellent walkthrough.

AMAZINGGGGG, thank you for the class. Good teacher!

I didn't see any way to download the image for a down chevron to indicate a drop-down menu in the above comments. I also didn't see how to incorporate it into the HTML code to have it next to that particular hyperlink in your video tutorial. All in all, however, your tutorials are very informative and I greatly appreciate you making them. I haven't gotten through all of them yet, but I am making my way through all of them. Thank you for taking the time to make these videos and for being very informative.

Greatly helped me make my school project. Appreciate the effort! Thanks!!

Hi Dani, When I add this to my website and I want to add a bootstrap carrousel it keeps scrolling down behind the bootstrap. How can I fix this. I like the work you do. I was just hoping you could help me.

what about if I already have a video added to my HTML file. How do I make the drop down menu show in front of the video. Currently is showing behind the video when I hover over the menu.

Wow! Amazing! Nice CSS coding! Thanks 🙏