How To Make Drop Down Menu Using HTML And CSS

How To Make Drop Down Menu Using HTML And CSS | HTML Website Tutorials

Рет қаралды 3,488,823

5 жыл бұрын

Learn How To Make Drop Down Menu Using HTML And CSS. HTML Website Development Tutorial for beginners.
❤️ SUBSCRIBE: goo.gl/tTFmPb
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialspro.com/go/course/
In this video you will learn to create Drop down menu in navigation bar with icons using HTML and CSS.
#DropDownMenu #WebDevelopment #WebDesign #HTMLTutorials
You may also like below tutorial to create Full website:
Create Business Website Tutorial: • How To Make Website Us...
Create Fitness Website Tutorial: • How To Make A Website ...
Create Personal Resume Website: • How To Make A Website ...
Digital Agency Website Tutorial: • How To Make A Website ...
Job Portal Website Tutorial: • How To Make Website Us...
E-commerce Website Tutorial: • Create Ecommerce Websi...
-------------------------------------
Best hosting up to 60% off (coupon- EASYTUTORIALS)
👉 easytutorialspro.com/go/hostg...
Affordable hosting up to 91% (coupon- EASYTUTORIALS)
👉 easytutorialspro.com/go/hosti...
My recommended tools and tutorials
👉 easytutorialspro.com/
-------------------------------------
Join my channel membership and get all my new video's codes in community post:
Join Link: / @greatstackdev
-------------------------------------
Like - Follow & Subscribe us:
► KZfaq: goo.gl/tTFmPb
► Facebook: goo.gl/qv7tEQ
► Twitter: / itsavinashkr

Пікірлер: 2 200

@kashiri22 3 жыл бұрын

Man you saved me hours of work , i was trying to figure out what am I doing wrong when adding submenus , ive created a home page with designed buttons and everything aleady and i didnt want to delete it and rewrite the whole content , now you shown me how i easily add those submenus into my buttons and what i need to change in my css code , thanx you a legend

@2agamers25 Жыл бұрын

Me also

@mrCetus 2 жыл бұрын

If you encounter problems you probably need to recheck your html code as for example, I was having problems with the first dropdown menu, the issue was that the was placed wrongly, you can take a look where the was before and after (11:05 - 12:09). after he added those lines of code I still thought that the was at line 11 but it actually was at line 19. check your html and look check so att everything is as the code that he has!

@lasatamaharjan1630 Жыл бұрын

👏

@amairasharmaaa43 Жыл бұрын

THANK YOU SO MUCH!!!!

@qhubbles Жыл бұрын

I wish I had a teacher like you at college. I'm sure will be visiting your channel quite often the next years. Thank you so terribly much.

@GreatStackDev Жыл бұрын

Thanks to you bro

@charusharma7872 Жыл бұрын

animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html

@fatgeekproduction7528 3 жыл бұрын

LOVING THIS! So simple, yet elegant! A beginner like me got it.

@ehinomenosaigbovo527 Жыл бұрын

So many ways to style your navigation! Saw all from Easy tutorials!

@GrajaGopalaReddy 7 ай бұрын

hlo can you send me the code

@eirikolsnes 5 жыл бұрын

Very calm and confident explanation of your process. Would like to see a follow up with how to tune this for mobile phones and tablets - I think that would be very helpful. Thank you!

@WebTrend 2 жыл бұрын

I decided to share my knowledge as well can you check it out

@user-ri2ms2mm7w 2 жыл бұрын

My friends, search for your life purpose, why are we here?? I advise you to watch this series 👇 as a beginning to know the purpose of your existence in this life. kzfaq.info/sun/PLPqH38Ki1fy3EB-8xmShVqpbQw99Do2B-

@alexprecious1915 Жыл бұрын

Same here...

@brandonhuala2747 2 жыл бұрын

The only thing about some images is you may need to try a different positioning value when I tried background image center it was to small, but I fixed it to position absolute and it worked perfectly very good so far though.

@paulhetherington3854 Жыл бұрын

There's never ever, an absolute. Turns off - power grids. Or drops, web cams.

@chetannarvekar1416 Жыл бұрын

thank you man you ,i was also trying to figure out how to position image

@mr.how123 Жыл бұрын

thanks it works

@subin00 3 жыл бұрын

Hi! I'm Korean. Thank you so much!! Your video is useful and easy:) You are my best teacher👍

@zamzam2060 Жыл бұрын

I watched some videos for you to make a website and I saw that you are perfect God bless

@francislambert5189 5 жыл бұрын

Well enough to make my project "Shine"..! Thank You. Peace :)

@asifhossain2088 2 жыл бұрын

same here

@dtanubis1722 2 жыл бұрын

Why r u gay?

@hadjerdebbah5929 4 жыл бұрын

Thank you for that design .. really helped me to start my project

@Jj-iu3ed 3 жыл бұрын

really superb bro i struggled to add image as background and now i felt easy. thank you! but drop down options are right side for me i gave input as left only

@0xN1nja 3 жыл бұрын

Sir thank you so much first css was not applying but after i changed its name it worked thank you so much

@maanka_yare 4 жыл бұрын

I liked for this video and i say keep going my friend✅✅✅✅👏👏👏👏👏

@riteshmahajan5209 4 жыл бұрын

Thanks Buddy for such an interesting project, really loved making every bit of it. God Bless U and please keep adding such interesting and challenging projects for the to be web developers. ..

@ahmedkaram9072 3 жыл бұрын

Color hunt app play.google.com/store/apps/details?id=com.whitewolf.colorhunt

@NAGENDRAYADAV-hk2gk 3 жыл бұрын

@miansherzaman8906 3 жыл бұрын

@WebTrend 2 жыл бұрын

I decided to share my knowledge as well can you check it out

@user-ri2ms2mm7w 2 жыл бұрын

@SofaDelag 3 ай бұрын

This helped me so much! I literally fixed a weeks worth of work in a few hours thanks to this tutorial, thanks so much! I will def be watching more of your videos in the future, keep up the amazing and helpful tutorials! :)

@mantralayamsrinath9920 3 жыл бұрын

Your methods are excellent. You are an excellent instructor. Your instructions is consistent and logically well structured.. Thank you,

@WebTrend 2 жыл бұрын

I decided to share my knowledge as well can you check it out

@7inch540 4 жыл бұрын

Thank You Soo Much Appreciate Your efforts Towards Uss 🙏 Help Me A Lot

@sokhaitrey9211 5 жыл бұрын

I can't wait to press like button. Thank you are awesome

@teez_q9321 3 жыл бұрын

Woah this one was super perfect!!!!!!!!! I could clearly got all the points!!! Thank you for encouraging me to carry on my digital journey!!! Best of luck for all your endeavors!!!!! 😌💕

@WebTrend 2 жыл бұрын

I decided to share my knowledge as well can you check it out

@user-ri2ms2mm7w 2 жыл бұрын

@emni8560 3 жыл бұрын

Thanks a lot.. I'm everyday searching and searching abouts same this vedio. But i got it's finally. Thank you so much brother...

@sulwan9804 4 жыл бұрын

Thank you for this lesson. This is exactly what I was looking for - Rehman

@WebTrend 2 жыл бұрын

I decided to share my knowledge as well can you check it out

@user-ri2ms2mm7w 2 жыл бұрын

@joshdenton611 3 жыл бұрын

you have the best web design tutorials i've ever seen. thank you for the knowledge and i wish you the best of luck!

@WebTrend 2 жыл бұрын

I decided to share my knowledge as well can you check it out

@user-ri2ms2mm7w 2 жыл бұрын

@abdullahiayanle2293 2 жыл бұрын

Brilliant video, Thank you for posting this video. Really helpful. Spent year long learning CSS. It makes sense.

@GreatStackDev 2 жыл бұрын

Glad it was helpful!

@leonardorodrigues8022 4 жыл бұрын

Maaaan, thank you soooooo much. Brazil here \o/

@pndungu1 3 жыл бұрын

Very informative, very composed tutorial, and definitely something to try out in 2021.

@WebTrend 2 жыл бұрын

I decided to share my knowledge as well can you check it out

@user-ri2ms2mm7w 2 жыл бұрын

@sanjuchapagain4102 Жыл бұрын

The easiest and best video l have ever found in KZfaq for beginners to learn about html and css ...lots of respect to u bro🍀🍀

@jessicakoomson871 Жыл бұрын

Hi can I get the source code please

@richagurav 3 жыл бұрын

The best video ever...thank you so much for amazing video😊

@apz5400 4 жыл бұрын

I 'm glad I found your tutorial video, I started learning on Html,Css a month ago this is very helpful on my learning, Thank you so much for sharing your knowledge and the videos. very appreciated!

@asifhossain2088 2 жыл бұрын

same to u

@cumarmusse9516 2 жыл бұрын

Same here any ideas I don't seem to put two things together

@WebTrend 2 жыл бұрын

I decided to share my knowledge as well can you check it out

@user-ri2ms2mm7w 2 жыл бұрын

@mumbaichaking3192 Жыл бұрын

can u help me creating attendance website

@michelenicholas3361 4 жыл бұрын

I'd love to see part two making it mobile friendly with media queries

@DEEPAKMISHRA-km9uu 4 жыл бұрын

It is helpful video Thanks 😍

@ganesanchelladurai8862 3 жыл бұрын

Where do I get the part two video with media queries?

@SeekCoding 3 жыл бұрын

@@DEEPAKMISHRA-km9uu kzfaq.info/get/bejne/jcBln7Wfuci3oH0.html

@jyotigupta08 3 жыл бұрын

What is media queries

@SeekCoding 3 жыл бұрын

@@jyotigupta08 media query is used for making the website to be responsive i.e it will make the website to look good in computer and as well as in phone

@yuvarajnpriyas5367 3 жыл бұрын

Awesome. Very much interested to learn about HTML & CSS . I have tried parallelly got good looking website. Thank You so much. Keep it up.

@jackk7717 Жыл бұрын

yr bhai i am searching this for three days so finally i was see your lec and it is very helpful for me lots of love from pakistan.

@charusharma7872 Жыл бұрын

animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html

@srushtibuch1964 3 жыл бұрын

I can't stop myself to subscribe your channel...😊😊😊 Simply awesome 👍👏👏

@WebTrend 2 жыл бұрын

I decided to share my knowledge as well can you check it out

@rihards496 4 жыл бұрын

Dope tutorial, helped me out alot! Thank you.

@user-ri2ms2mm7w 2 жыл бұрын

@ShakilAhmed-bd3wq 2 жыл бұрын

Well enough to make my project "Shine"..! Thank You. Peace :) love you sir

@GreatStackDev 2 жыл бұрын

Thanks Boss

@coreamazon 3 жыл бұрын

This video is great. I explained it really easily and applied it to my project. Thank you. Thank you so much!!!

@alam5741 3 жыл бұрын

please subscribe ... html tips n tricks kzfaq.info/get/bejne/hcVypZl-xpvedYk.html

@user-ri2ms2mm7w 2 жыл бұрын

@mahreztm7122 4 жыл бұрын

Nice tutorial, it's so helpful, Thank you for this video!

@WebTrend 2 жыл бұрын

I decided to share my knowledge as well can you check it out

@mdmanik-xy7ui 4 жыл бұрын

I'm from Bangladesh Thank you.

@bonniemiller5288 7 ай бұрын

Thank you so much. I learnt a lot watching this video. Good explanation. You are a good teacher

@vasanth1568 2 жыл бұрын

I have watched plenty of videos but got no idea you really did good job👍🏻

@charusharma7872 Жыл бұрын

animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html

@robelhabesha5108 4 жыл бұрын

This is so helpful sir thank you and how can I make this web as an interface of the database???

@deepahosur4893 4 жыл бұрын

Really it helped me a lot sir... It's awesome video ur sharing n helping ppl like us plz do share complete website learning procedure also

@mumbaichaking3192 Жыл бұрын

can u help me making attendance webpage or website

@TheMatter-xd1ts Жыл бұрын

Thank u now i understand codes that ive been copying online

@favourokon6891 3 жыл бұрын

Thank you so much for sharing your idea. This lesson was extremely helpful

@user-ri2ms2mm7w 2 жыл бұрын

@asmitakadam9679 2 жыл бұрын

Thanks a lot! I cant express in words how much thankful I am to you for this amazing, easy conceptual video.You have covered a very important concept in CSS .

@WebTrend 2 жыл бұрын

I decided to share my knowledge as well can you check it out

@user-ri2ms2mm7w 2 жыл бұрын

@charusharma7872 Жыл бұрын

animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html

@umeshanirmani 4 жыл бұрын

well explained, thank you!

@user-ri2ms2mm7w 2 жыл бұрын

@shalimasuresh6470 8 ай бұрын

a lot of thanks to your videos for a begginner and pro.a super thanks..worth.managed well as you have given images links

@BiologyDaily001 2 жыл бұрын

Very smart...you are so loud and clear. You deserve a credit. Thanks.

@charusharma7872 Жыл бұрын

animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html

@venkataramireddypulikhanda6071 4 жыл бұрын

Great :) Please explain short cuts also. what are the short cuts for copy the same code.

@syediqbalahmed3176 4 жыл бұрын

done before internet connection & other's video tutorials in the easiest way

@asbsckhtv2136 4 жыл бұрын

Sir. Iam app create idea Electrical service app Please information sir

@leynakagere 14 күн бұрын

Thanks it has really helped so much 😊 on our projects

@muhammadtalhasajid6826 4 жыл бұрын

Amazing Tutorial! I am highly appreciated you, You helped me so much throughout the video.

@siddarthsmith1376 3 жыл бұрын

Its waste of watching without any explanation...nothing is understandable.

@WebTrend 2 жыл бұрын

I decided to share my knowledge as well can you check it out

@ibrahimalgin7442 5 жыл бұрын

Can you share the link to the backgraund image

@Ovzvz 2 жыл бұрын

Thank you so much sir this is the best tutorial for making a dropdown menu!!

@charusharma7872 Жыл бұрын

animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html

@rakeshkoduri3891 6 ай бұрын

One of the best videos I had watched that you sir

@najeebzakariya2346 2 жыл бұрын

Thanks for the very helpful tutorial. How do you link the the dropdown links to a page within the website?

@HeleneBimenyimana-ko9ug 8 ай бұрын

Same question

@06_reenakumari8 3 жыл бұрын

tooo much qawsome way that how u going slowly every step clear to build this webpage.......an awsome platform is here you show how to learn to codes nd build webpage to an unknowing coding bigginner ....thnkuuuuu sir a lot

@GreatStackDev 3 жыл бұрын

Thanks Reena, Even i have a better video for beginners, after watching that it would be easier to understand my all videos: kzfaq.info/get/bejne/faeKidmhz969gY0.html

@robertoandreslunareyes8897 Жыл бұрын

It's a really good video to recall simple things. Thanks for ur time.

@jayrayner702 4 жыл бұрын

your content is so informative however there's a lot of ads on your channel.

@deepakmisra8973 3 жыл бұрын

Hv you try above code...lol

@Entertainment.Tube0 3 жыл бұрын

😂😂😂😂

@FixItAngel 3 жыл бұрын

Thank you

@JdotSewell42 Ай бұрын

Your videos are extremely helpful. Thank you so much.

@isnaniweb 3 жыл бұрын

Wow! This is awesome... Thank you for this tutorial.

@pankajyadav5507 3 жыл бұрын

Thank you, for your code that you have been coded to form a drop down menu.

@NirajKumar-tv2lm 3 жыл бұрын

super

@thisisaprankyep5746 3 жыл бұрын

I know that you visit here because of school 😂😂

@Riddlezzz. 11 ай бұрын

Ye kis school me hota be

@aftabraza2854 8 ай бұрын

Yes brother you are right

@shk120 8 ай бұрын

Bro im in college 😒

@georgechris3281 8 ай бұрын

😂sure

@ShikharThakur-tr8iv 7 ай бұрын

I'm here bcoz of the views 3.2m🔥 1:21

@jojuthomas3406 2 жыл бұрын

Thank you for this perfect tutorial. I learned HTML and CSS but this was the perfect way to get familiarize with the application of what I learned.

@WebTrend 2 жыл бұрын

I decided to share my knowledge as well can you check it out

@user-ri2ms2mm7w 2 жыл бұрын

@charusharma7872 Жыл бұрын

animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html

@nivinnivin6913 Жыл бұрын

u are the only one who saved my code thank u so much

@marzouqalbaiji1984 4 жыл бұрын

its a nice video, but can you tell why you paste the CDN link what it help for? thanks

@DIAMONDXEPHOS8LEO 4 жыл бұрын

It was for the fonts and logos

@salimbsc 4 жыл бұрын

I have created different html files for home , about , etc.. When I click those lt should open in same index page. how to do that ?

@jayapraveens6305 4 жыл бұрын

just add target="_self" in the html code bro

@bingewatch_anime 2 жыл бұрын

Thanks bro I invested my 3-4 hours in it writting side by side on my laptop thankq this was my first Website menu. 😘

@SachinKumar-fb7id 3 жыл бұрын

Really sir....thank u soo much for providing us this kind of videos

@thangciu1345 4 жыл бұрын

Great !!! Tkanks youu

@GreatStackDev 4 жыл бұрын

Thanks Thắng Ciu for your comment

@aniketashokbhise 3 жыл бұрын

@@GreatStackDev where download image

@bamboolambo 4 жыл бұрын

Wow, nice that my left ear learns 2% more then my right ear!

@mikeyo5154 2 жыл бұрын

Best tutorial I've seen on dropdown menus. Thanks for posting

@charusharma7872 Жыл бұрын

animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html

@Ronzayy 3 жыл бұрын

Thank you sooo much. This has helped tremendously

@iroreresuperior.m4966 4 жыл бұрын

pls how can i get the background u use for the tutorial.

@brankokovacevic829 4 жыл бұрын

pexels.com

@sankarganeshm9124 3 жыл бұрын

🔥🔥🔥

@Legend-vj1fe 2 жыл бұрын

Thank you ! It was so easy to follow along with and understand. 😃

@user-ri2ms2mm7w 2 жыл бұрын

@charusharma7872 Жыл бұрын

animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html

@adriblack511 3 жыл бұрын

Great video, but maybe you should explain a little about why you're doing what you're doing when you're doing it. Otherwise, we're not understanding the WHY which is most important when we want to take what we learned here and apply it to a different project. I was able to follow along easily with this video, but when I wanted to add a dropdown menu to something else, I didn't know how really. Without explaining why we're just basically copying code and typing it out without understanding really why we're doing it.

@CrappyTara 4 жыл бұрын

11:37 so I can re-watch it again lol.

@istoalfiah6851 4 жыл бұрын

Hahahha same

@kittencroft9126 4 жыл бұрын

Thanks i was looking for that comment haha

@amongdoomers9464 3 жыл бұрын

What you guys mean?

@shakib_04 3 жыл бұрын

@@amongdoomers9464 main part start from there.

@vibz9319 3 жыл бұрын

hello! I have a question... What resolution is this background image from your website?

@GreatStackDev 3 жыл бұрын

1920x1080

@RABBY360R 2 жыл бұрын

i'm clear about drop down menu. Thank you

@inzamamulhoqueemon3274 3 жыл бұрын

This content are most usefull for beggener the basics

@ussamafaris3993 3 жыл бұрын

I have a problem always is chasing me for not showing any background images even though the path of the image is right.

@v.zmuzik2539 3 жыл бұрын

yes i have too background image not showing

@ahnaafarafee 3 жыл бұрын

donno but my left headphone just banged 💣

@user-rf4vc7mt4d 3 жыл бұрын

i had a jumpscare out of that, it's like someone was behind me oof

@sonsisay 2 жыл бұрын

today i sawed this video and amazed more, thanks for your great support thank you so much.

@charusharma7872 Жыл бұрын

animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html

@mohdkaifkhan6336 3 жыл бұрын

THANK U SOO MUCH , IT HELPED ALOT 💯

@rahmathrahmath5861 3 жыл бұрын

* { } From where this tag came, And what does it mean

@memee9658 3 жыл бұрын

click ALT + 0123

@MDA_GamingSquad 3 жыл бұрын

It is the selector which is known as star selector whatever style you apply in this selector applies to whole HTML page

@kokoraphael191 3 жыл бұрын

Thanks for part one, I wanted to finish up to part two. Is it coming soon?

@allanauka5190 Жыл бұрын

The best and easy to follow tutorial. Was very helpful to me thank you very much

@charusharma7872 Жыл бұрын

animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html

@partha1310 11 ай бұрын

Thank you so much its very helpful to mee ❤️

@chibuzoanyanele3382 3 жыл бұрын

WOW, Thank you so much for this, i'd learn a lot from your video.

@emmanuelekwere9198 3 жыл бұрын

Hello bro. Please my background image doesn’t fit the screen. Anything I can do ? Help a brother from Nigeria

@brightasinde7034 4 ай бұрын

One of the best video step by step Sir Please can you make video on contact submenue Adding registration or loggin form as a contact submenue

@Redbook321 Жыл бұрын

I really enjoy your channel and you are a good teacher. I might have missed sotNice tutorialng and I don't get friends with the setuper. I worked

@charusharma7872 Жыл бұрын

animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html

@raselsarder8271 2 жыл бұрын

Easy to understand, well explained, thank you!

@GreatStackDev 2 жыл бұрын

Glad it was helpful!

@charusharma7872 Жыл бұрын

animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html

@user-wk4kf3bx6x 2 жыл бұрын

I would really thank you for teaching new to your viewers every day.

@charusharma7872 Жыл бұрын

animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html

@KHURAMshahbazkhuramshahb-zu2cz 5 ай бұрын

Thank you very much, I learn something from you. Thank you so much

@johnlj_ciscocertified Жыл бұрын

thanks for sharing your knowledge for other shaping there too. easy to follow html/css tutorials

@charusharma7872 Жыл бұрын

animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html

@abcdef-sc1tv 3 жыл бұрын

tq so much.it is very helpful for my project

@simonmuchemi7969 Жыл бұрын

You've made my life easier, thank you so much.

@GreatStackDev Жыл бұрын

Thanks Simon, Glad you liked this video to make drop down menu for website

@voltthethunderwing8511 Жыл бұрын

Thank you so much, You just saved my protect ! Hope you reach 100k subs soon!

@GreatStackDev Жыл бұрын

Thank you so much, please visit our channel for more videos: kzfaq.info/love/kjoHfkLEy7ZT4bA2myJ8xAvideos

@crankluga 2 жыл бұрын

Very simple and straight forward. I got the answer i was looking for easily

@charusharma7872 Жыл бұрын

animated Box With CSS kzfaq.info/get/bejne/naidq5aD0rrMdHk.html

@jessicakoomson871 Жыл бұрын

Please can you help me with the source codes

@crankluga Жыл бұрын

@@jessicakoomson871 didnt need to write any code gist, since solution is straight forward. The answer is in the position and the position off-set as in the video. The position offset can change depending on the menu.

@jessicakoomson871 Жыл бұрын

@@crankluga thank you so much I really appreciate