How to create a simple Dropdown Menu Bar using only HTML & CSS

How to Create Drop Down Navigation Menu with CSS and HTML | Pure CSS Dropdown Navigation Bar
👉 Get this Code at: www.divinectorweb.com/
👉 Buy Me A Coffee: www.buymeacoffee.com/divinector
Follow this Channel:
--------------------------------------------------
👉 Website for Source Code: www.divinectorweb.com/
👉 Facebook: / divinector
👉 Twitter: / divinector
👉 Instagram: / divinector
👉 Subscribe to this Channel: / @divinector
===========================================
--| Watch More Videos on Webdesign | --
-----------------------------------------
▶️ Full Website For Scratch: cutt.ly/0NCSXoV
▶️ Flexbox examples: cutt.ly/XmYdofE
▶️ Navigation menu Tutorial: cutt.ly/7mYdnGX
▶️ Ken Burns Effects: cutt.ly/wmYdfRb
▶️ Swiper slider tutorial: cutt.ly/WmYdWu0
▶️ Slick slider tutorial: cutt.ly/5mYdTl3
▶️ Footer Design: cutt.ly/ZmYdUHB
▶️ Pricing Table Design: cutt.ly/emYdAaY
▶️ Contact Form Design: cutt.ly/5mYdFgT
▶️ CSS Image Hover Effect: cutt.ly/9mYdK6v
▶️ CSS3 Animation Snippets: cutt.ly/umYdBCz
▶️ Home page design: cutt.ly/7mYd9Zs
▶️ Web Design & Development: cutt.ly/nmYft52
▶️ Text Animation: cutt.ly/QmYfpA4
▶️ JQuery Plugin Tutorial: cutt.ly/MmYffYb
▶️ HTML Template: cutt.ly/AmYfj0s
Image Credit: Pexels
Music Credit :
--------------------------
Track: Diviners - Savannah (feat. Philly K) [NCS Release]
Music Provided By: NoCopyrightSounds
Watch: • Diviners - Savannah (f...
NCS Spotify: spoti.fi/NCS
Free Download / Stream: ncs.io/savannah
#divinector

[@HostDotPromo]

This is very useful, I prefer all CSS for sure.

[@azizrahman3225]

Awesome I really appreciate it

[@zanispleve1777]

Mate, it is not working for me. My problem is starting with 2nd , it is not showing. Can you please tell how to solve this problem?

[@cciecloud]

I love this channel

[@mubarockster]

It really help me alot

[@swetarani8375]

Its a great video... it helped me a lot to understand how all these css properties are working together to generate that beautiful result.

[@Divinector]

Glad to hear that

[@Santello22]

This helped met a lot. So a big thank you!

[@Divinector]

Glad it helped!

[@nadinemusardo8780]

this was helpful thank you!

[@Divinector]

Thanks & Please share the videos of this channel

[@nbnabil3948]

very very help full

[@navaskhaniv-b8719]

Wow it's an amazing css and html before this I select other video lecture that wasn't help me.then I choosen it very helpful to me again thanks

[@Divinector]

Glad to hear that

[@kicikuci6758]

cool

[@mahendramohane1048]

awesome teaching style bro. great n easily explained eveything

[@Divinector]

So nice of you

[@angrynorseman5566]

html, and css seems like it needs a little javascript due to the boundary issue I'm seeing with windows being more narrow.

[@shahulz4705]

Just owsm bro....

[@Divinector]

Thank you so much 😀

[@ssigitas69]

Perfect. Very quick and nice. But for me it is to big. I need to try on smaller that tutorial. Thanks so much man. Well done

[@Divinector]

welcome

[@harharmahadev7036]

@@Divinector how can i center align it

[@sarimmominkhawaja6116]

@@harharmahadev7036 you can use align items or justify content

[@techysky2706]

Software You Used....Please Tell Name of that or Provide Software Download Link

[@hasibhasan7919]

thanks for the music

[@imanmoodi3696]

whats the name of background song?

[@Boss_in_Night]

Thank you

[@Divinector]

Welcome!

[@MsSoldadoRaso]

and for mobile?

[@muslimshexany6066]

thanks

[@Divinector]

Welcome

[@nanayawpaddy3324]

my menu is not showing

[@hotlab7765]

name of program your write

[@AthlonMDK]

From:
.nav-area ul li:hover > ul{
display: block;
}
it does not work for me. I doublechecked but in FF and Chrome does not work
Is there something i miss?

[@salvatorelucania6547]

Same problem here ..
did you fixed it somehow ?

[@un230skdk2jas]

100% awesome video. hey, I'm just curious about your CSS parts of : the before lines.
.nav-area:after{
content:'';
clear: both;
display: block;
}
instead of that, I wrote
.nav-area{
display: inlin-block;
position: absolute;
width: 100%;
background: #262626;
}
I think the result is totally the same as the first one with: before.
If you have some spare time, could u explain the reason u wrote: before? thx.

[@Moodboard39]

Probably don't matter lol probably add things that not necessary

[@madhurshanan7548]

css source code plzzzzz

[@newsunplastic595]

helping....

[@Divinector]

thanks for the visit

[@Rohit-sn3ew]

How to Align them to center? please tell pls pls pls
i m stuck😔😔

[@Divinector]

Try
nav ul{text-align: center} or nav ul{padding-left:30%}

[@mm-iv3bu]

can you provied me this code in soft form

[@Divinector]

Added