Pure HTML and CSS drop down navigation bar

[@haarisnaeem4751]

These are good videos but just a suggestion: can you put the code in the description so we don't have to keep pausing. Thank you. Like if you agree

[@adnantv3162]

#adnan { background-color: red; height: 500px; } #nav { background: tomato; max-height: 800px; } ul { list-style: none; padding: 0; margin: 0; position: absolute; } ul li { float: left; margin-top: 20px; } ul li a { width: 150px; color: white; display: block; text-decoration: none; font-size: 20px; text-align: center; padding: 10px; border-radius: 10px; font-family: Century Gothic; font-weight: bold; } a:hover { background: #669900; } ul li ul { background: tomato; margin-top: 10px; } ul li ul:hover { transition: 2s ease; background: gray; color: white; } ul li ul li { float: none; } ul li ul { display:none; } ul li:hover ul { display: block; } HOME NEWS BLOG FEEDBACK MORE MORE1 MORE2 MORE3 MORE4 MORE5 ABOUT CONTACT

[@adnantv3162]

bro this code

[@chogi9860]

thanks so much

[@aaranragu]

@@adnantv3162 God Bless your soul man hahaha. Thankiuuu

[@adnantv3162]

@@aaranragu thanks

[@assassinali1578]

I have watched several of your videos they are great.I dont know how but i just search ,scroll down and just click your video without knowing😅😩

[@edeoghonaigbe7257]

What a superb vudeo for a beginner like me, i appreciate

[@rthosarrohini]

I have done same coding but after ul li ul : hover display: block not working. That is sub menus are not displayed after mouse over to list.

[@johabib8354]

it is ul li:hover ul

[@스타니-k6y]

It was a very useful video. Thank you. I almost couldn't find a way to make my own code, When I watched this video, I finally found a way. It was easy, simple and effective

[@MasaiDartz]

This was such a nice and easy guide on navigation bars. I had to pause the video a lot or go back while i was doing the work, but that's all a process of learning.

[@libinantonygardener]

Great and simple video for beginners.,Good Work for mate.

[@shannonstumpf1861]

you nailed it! very nice! now i have to practice this. it's harder than i thought it would be for sure

[@kurnool_loke]

congrats bro best videos i seen

[@johabib8354]

Thank you for sharing your experience with us. Would you kindly please show us how to add a title to the left and then the navbar next to it because I have tried to float the bar to the center but it didn't work. Thank you

[@karsonronnie8333]

instablaster

[@actuall55]

this is a great video thank you for your time an putting it together

[@rishipatel6646]

thank you for this video it's very use full for me

[@samadsiddiqui9435]

U r to good you make my work to easy .thank u sir u r great .

[@mohitzen]

Thankyou webmaster.

[@cheesealone6443]

i can't get the drop down to come down

[@buladice_04]

your codes were helpful but only problem i faced was that the dropdown hides into the navigation bar....waiting for your help ..thankyou

[@nareshkumar804]

Nc bro easy method . Thx 😊

[@ManishKumar-de5up]

very nice video sir it helps me a lot in my project

[@alexjoma190]

why did not use tag before the element so that whole area be capable of being selected...

[@Moodboard39]

It chose one to be selected . Obviously.

[@chundurusriharsha2402]

How can we understand this program without explanation,so type the program with explanation,so that we can understand it.

[@jatindahiya4398]

Excellent video

[@PP-gx7cs]

Very Good

[@rohitkumawat5419]

Thank you so much sir

[@daviddomaguina9578]

Hey mate i want my dropdown menu if i click on a list it will load and open the content of my work

[@itmoindrive]

Just create it. Possible for me. Thank you. Doing great and carry on.

[@webmaster1498]

Thank you sir

[@pritamprajapat3831]

Plz send video

[@be-kreidly1515]

Hello sir, the website you put in the description box is not taking me to the source code as you stated above. I did my account in Appian and still not finding any code there.

[@TOPMUSIC-pw1ii]

thanks aloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooootttttttttttttttttttttttttttttttttttttttttttttt my brother

[@ram_ji0101]

Thanks a lot sir

[@AngelRudhira]

Tq so much😇

[@manideep_talampally]

If you keep on hover then how will it work on mobile version....we cannot have cursor in mobile right....make a video without hover effect....like on clicking that li we have to get inside of list

[@compilations756]

Javascript

[@smitadeshmukh8161]

Nice vedio sir #webgurututorials

[@kasirojkt9245]

My problem when creating dropdown menu is, drop down menu not sit right under its parent menu. Its goes left on page

[@mdriyad2486]

Thank You 👍👍

[@bestmoments4908]

In navigation bar if move our mouse it's disappear right how can be fix as till select the option

[@rahmahammami9577]

THX sir

[@cabdullaahicabdicasiisxuse9797]

Thanks

[@RABWA333]

thanks , simple and clear

[@alimonsur6545]

Thank for share the video

[@samimhossain7913]

Your boss bro

[@shekhnazim9049]

I have done same coding but after ul li more options not working...... plz explain properly

[@נבוצברי]

The navigation bar is on the left. How can I change it to the center?

[@o1techacademy]

This is great. Thanks. Will the menu bar be responsive on a mobile device?

[@Moodboard39]

Need code in HTML to do that

[@bayuyudhasaputra3169]

Greet css trick... But there is typo in html code.. You write without (in 4.20) Thank...

[@poojansenghani1420]

Thank you for learning

[@Toro-Tor]

These days more than 50% of users browse with a smartphone - and there is NO HOVER-EFFECT ON SMARTPHONE, therefore you should not use this code - you should add the "toggle" effect.

[@shankarganeshacharya4272]

How to write paragraph contents for l tabs and more 1, more 2 and other major tabs. Plz help

[@ak_digiservices]

anyone can create this ,but u have to use different tools for that which is flexible

[@gonzalosantiago3839]

thnak you

[@surajtiwari1796]

Not working

[@revanth9272]

Yes, for me too..

[@Nemanja_Milosavljevic]

how to make hover full, in full width?

[@kazuki32_z75]

still using notepadd++ now.. XD

[@MovieMenno]

thank you so much

[@arpitagarwal6578]

Bro code to koi bhi type krle usse smjhaya he nhi, not taught what you did but just showed how you did

[@arpinedarbinyan737]

Can I create dropdown without "ul and li"????

[@himikookami3047]

no you must use ul and li

[@Moodboard39]

That's the code for it lol 😂 why you trying to find another way?

[@informatiquedz9800]

you should use flexbox ;)

[@webmaster1498]

Thank u for suggestion ...........

[@techtipsuk]

Why would you do that? just limit browser support for no reason

[@eula1194]

flexbox makes html code dirty.. css gird > flexbox

[@techtipsuk]

I think you mean Grid. You're talking shit though. CSS has no bearing on HTML code. Thats the whole point of CSS, the separation of concerns.

[@eula1194]

CSS GRID framework not Grid.. in response to user : Informatique DZ since he's talking about css frameworks... might as well use the cleaner one

[@rubataslam7541]

Kindly give this source file it is not availabile in given source file link

[@neelamsomavanshi3547]

Thanku

[@integrateeverything]

Please send me the source code

[@sauer.voussoir]

thank you :D

[@aditisingh2577]

Sir I want source code for this file..

[@jifunzeteknolojia9304]

Good

[@cursedxsoulnation4948]

not able to download the file bro

[@BL00DisH0T]

Not Working Actually :/ SOmething error in the words in the navigator bar

[@Moodboard39]

U doing it wrong and not paying attention or u using a different text editor

[@hermannyao7464]

thank

[@ananyagoswami7313]

Does he even know how to speak?? All of his words are incomplete. Like- Nvgtn br That's the way he pronounces it. Please be more clear!!!

[@rudrakumar7183]

Aap to sirf type karte na rahe ho samjhaye to thoda bhi

[@sabertoothwallaby2937]

Does href have to equal #? Or is this for example?

[@THlive]

it can be anything u want

[@Moodboard39]

@@THlive really??

[@nyasha._]

9:39

[@prabu2778]

ul li :hover ul li { }

[@ishikakumari8910]

Sir hindi m btao

[@imanehiba6436]

الكود خاطئ

[@shitha24]

What your are explaining it's look like your learning it yourself.waste of time

[@Moodboard39]

Okay, what the fking problem? Made a nav bar ..so? Why the fck complaining son?!

[@jamalhossain-ie6vd]

your style not good

[@Moodboard39]

How is not good???

[@ak_digiservices]

waste of time

[@bayuyudhasaputra3169]

No... This is native css,bro...

[@pratikraj7475]

Thanks man

[@syediqbalahmed3176]

good

[@fathimaminhafarook1243]

Thank you.

[@pilavarasan5829]

Not working

[@rizachahid2162]

thank you very much

[@Vasudevj1]

thanks a lot