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

[@edeoghonaigbe7257]

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

[@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😅😩

[@스타니-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

[@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

[@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

[@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.

[@rishipatel6646]

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

[@actuall55]

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

[@nareshkumar804]

Nc bro easy method . Thx 😊

[@samadsiddiqui9435]

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

[@mohitzen]

Thankyou webmaster.

[@ManishKumar-de5up]

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

[@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

[@cheesealone6443]

i can't get the drop down to come down

[@rohitkumawat5419]

Thank you so much sir

[@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

[@chundurusriharsha2402]

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

[@mdriyad2486]

Thank You 👍👍

[@jatindahiya4398]

Excellent video

[@AngelRudhira]

Tq so much😇

[@smitadeshmukh8161]

Nice vedio sir #webgurututorials

[@PP-gx7cs]

Very Good

[@itmoindrive]

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

[@webmaster1498]

Thank you sir

[@pritamprajapat3831]

Plz send video

[@TOPMUSIC-pw1ii]

thanks aloooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooootttttttttttttttttttttttttttttttttttttttttttttt my brother

[@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.

[@daviddomaguina9578]

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

[@o1techacademy]

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

[@Moodboard39]

Need code in HTML to do that

[@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.

[@RABWA333]

thanks , simple and clear

[@cabdullaahicabdicasiisxuse9797]

Thanks

[@alimonsur6545]

Thank for share the video

[@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.

[@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

[@kasirojkt9245]

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

[@shankarganeshacharya4272]

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

[@bestmoments4908]

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

[@rahmahammami9577]

THX sir

[@bayuyudhasaputra3169]

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

[@נבוצברי]

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

[@shekhnazim9049]

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

[@MovieMenno]

thank you so much

[@samimhossain7913]

Your boss bro

[@surajtiwari1796]

Not working

[@revanth9272]

Yes, for me too..

[@gonzalosantiago3839]

thnak you

[@ak_digiservices]

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

[@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

[@arpitagarwal6578]

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

[@kazuki32_z75]

still using notepadd++ now.. XD

[@Nemanja_Milosavljevic]

how to make hover full, in full width?

[@arpinedarbinyan737]

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

[@himikookami]

no you must use ul and li

[@Moodboard39]

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

[@neelamsomavanshi3547]

Thanku

[@sauer.voussoir]

thank you :D

[@nyasha._]

9:39

[@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!!!

[@integrateeverything]

Please send me the source code

[@rubataslam7541]

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

[@sabertoothwallaby2937]

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

[@THlive]

it can be anything u want

[@Moodboard39]

@@THlive really??

[@jifunzeteknolojia9304]

Good

[@aditisingh2577]

Sir I want source code for this file..

[@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

[@rudrakumar7183]

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

[@hermannyao7464]

thank

[@cursedxsoulnation4948]

not able to download the file bro

[@ishikakumari8910]

Sir hindi m btao

[@prabu2778]

ul li :hover ul li
{
}

[@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?!

[@imanehiba6436]

الكود خاطئ

[@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

[@fathimaminhafarook1243]

Thank you.

[@syediqbalahmed3176]

good

[@pilavarasan5829]

Not working

[@rizachahid2162]

thank you very much

[@Vasudevj1]

thanks a lot