Simple Dropdown Menu Using HTML and CSS
Source Code on our Website: HowToCodeSchool.com
In this tutorial we will see how to create Simple Dropdown Menu Using HTML and CSS. CSS position property and :hover selector is used for this purpose.
#dropdown #menu #css
Пікірлер: 128
Legendary. This person did in 2 minutes, simply and straightforwardly, in the easiest way to explain and understand, that nobody on the internet (after a week of research) was able to do. have a like, sub, and comment, man. Well done.
@HowToCodeSchool
7 ай бұрын
Glad it helped, thanks a lot for your kind feedback. (:
@govardhanvk
Ай бұрын
same same thank you bro #howtocodeschool
So great I done my assignment just under 2 minutes🎉🎉
A great tutorial! I am looking forward to change some values and test out the limits of this code.
THanks so much, been struggling with this basic thing for a day
I have no word !!!!!!!!!!!!!!! Just Thank you so much God bless you.
Short and simple ✅👍
does this work with the astra theme installed, for me the text is centered but the dropdown box is off centre
Thank you so much👑 Almost finish my blog, big thanks👍
@HowToCodeSchool
Жыл бұрын
Great job, you are most welcome!
Very usful, thank yoy ❤
THANK YOU SO MUCH! THIS IS A BIG HELP! 😭😭😭😭😭😭😭(especially to me who doesn't listen to class😅)
@HowToCodeSchool
5 ай бұрын
Happy to help!
Excellent job 👏
superb Man becz of u my doubt got clarified thanks a lot .
@HowToCodeSchool
Жыл бұрын
You are most welcome, Glad we could help. (:
Best tutorial on this topic.
If i wanted to have some list items on the left of the bar, and some on the right of the bar, would i need to create two seperate lists and allign one left and the other right?
@sohaibedits4749
8 ай бұрын
You have to use position absolute on such elements and give them margin from left
how do you change it so the box around the text on the dropdown menu isnt so big
Hello. I am unable to get the menu to drop from the Languages hover. I have followed very precisely.
Quality tutorial, thank you!
@HowToCodeSchool
Жыл бұрын
Thanks so much. (:
Beautiful THANKS
and as always great music! thanks
Best tutorial on this topic. Great work man
@HowToCodeSchool
6 ай бұрын
Thanks so much.
This video is very useful and understandable and also very simple
@HowToCodeSchool
Жыл бұрын
Glad you think so!
Thanks 👍
thank you mate for this! way to go!
@HowToCodeSchool
Жыл бұрын
My pleasure Sir, thanks for your feedback.
its strange.. my menu is located at the bottom, somehow i miss something ... (bit of a beginner here ;)
@jamiebrzzzgaming9692
8 ай бұрын
you need to do this right under body
How to add content to that html ,css,js and php?
Superb well understand loved it ❤
@HowToCodeSchool
5 ай бұрын
Glad to hear that
Thank u so much bro.iby this vedio i mmade my assignment 🤗
@HowToCodeSchool
9 ай бұрын
Love to read such feedback, good luck. (:
add voice. but yeah overall keep up with good work!!
Thanks, it works.
Best video for me thanks for your teaching
@HowToCodeSchool
5 ай бұрын
It's my pleasure. (:
Thanks bro❤
Music is annoying. Overall good.
Super bro
Thank you!!!
🔥
thank you so much its toooo help full😢
@HowToCodeSchool
7 ай бұрын
Happy to help (:
bro thanks my teacher spend for it 2h and i cant understant this
Thank you !
Thank you helped me a lot
@HowToCodeSchool
Жыл бұрын
Glad it helped. (:
@HowToCodeSchool
Жыл бұрын
and you are most welcome.
i wish i could give you a thousand likes!!!
is responsive?
Thank you.
thank you sir
Very useful and easy ❤️
@HowToCodeSchool
Жыл бұрын
Thanks a lot 😊
thank you vary maus
how to make it accessible?
Gracias mi pez
Is there a way to make the dropdown menu appear when Languages is clicked as opposed to hovered over?
@Psalmist01
10 ай бұрын
using the pseudo element li:clicked rather than li:hover should do the trick
Helpful video, but the drop down goes down till the half of the screen along with the other list attributes. Also can you upload your code so I can see what i did wrong
thank you❣
@HowToCodeSchool
Жыл бұрын
You're welcome 😊
works but where exactly do i put the CSS part in conjunction with the HTML piece?
@HowToCodeSchool
Жыл бұрын
In a separate file with .css extension and then you can include that file in HTML file.
@YURTZYN42
Жыл бұрын
@@HowToCodeSchool ohhh ok ok
@YURTZYN42
Жыл бұрын
@@HowToCodeSchool so do i like, put an href to the file above the html part for the css? i have it in a css file now not sure what to do.
@HowToCodeSchool
Жыл бұрын
Sorry for the delayed reply, Yes just include css like this in your html file.
@HowToCodeSchool
Жыл бұрын
style.css is the name of css file with extension and both .html and .css should be in the same folder.
Bro do u help me? I dont make this dropdown its not working for me?
@AliAbuZiyad
25 күн бұрын
oh, I had the same issue and I fixed it, so, this is my drop-down button. Button Text blah blah blah your error is probably over here; you need to do put " class="dropdown" " for it to work
@TheSunShineGaming
23 күн бұрын
@@AliAbuZiyad Thanks
@AliAbuZiyad
23 күн бұрын
@@TheSunShineGaming np
❤
thanks
Thanks so much
@HowToCodeSchool
6 ай бұрын
You're welcome. (:
Very god!
what doea # mean in a
@gkfactsandquiz3056
2 ай бұрын
It again comes to the same html file
A:hover doesnt work for mobile
how did you created the drop down symbol?
@HowToCodeSchool
3 ай бұрын
You can use this HTML Code ▾ for down pointing arrow.
@simran4981
3 ай бұрын
@@HowToCodeSchool thank you it's working 😊
I,ll try
where can I copy the dropdown icon after the "Languages"
@HowToCodeSchool
5 ай бұрын
You can use this HTML Code ▾ for down pointing arrow.
@Exmazi
5 ай бұрын
@@HowToCodeSchool thank youu, it worked on mine 👍
how you get that drop down arrow
@HowToCodeSchool
4 ай бұрын
You can use this HTML Code ▾ for down pointing arrow.
How to add language selector?
@HowToCodeSchool
Жыл бұрын
You can use this HTML Code ▾ for down pointing arrow.
Thank you But what is the name of the music😆😆😆
@HowToCodeSchool
Жыл бұрын
We have changed it :D
@brmosa6229
Жыл бұрын
@@HowToCodeSchool nooooo 🥲
How do you connect tabs to those dropdowns ?
@gamerpie1
Жыл бұрын
same question
Ye wala source code available Karo na..
how to do the arrow down in line 12, after the word Languages
@HowToCodeSchool
Жыл бұрын
You can use this HTML Code ▾ for down pointing arrow.
@gimpayajosephl.969
Жыл бұрын
@@HowToCodeSchool thank you very much
@jaismotherskitchen6277
Жыл бұрын
@@HowToCodeSchool or for black color arrow??
@HowToCodeSchool
Жыл бұрын
just change it's color using css.
@HowToCodeSchool
5 ай бұрын
You can use this HTML Code ▾ for down pointing arrow.
code source please
@HowToCodeSchool
Жыл бұрын
www.howtocodeschool.com/2021/01/simple-dropdown-menu-using-html-and-css.html
i want to source code...........
@HowToCodeSchool
6 ай бұрын
www.howtocodeschool.com/2021/01/simple-dropdown-menu-using-html-and-css.html
awesome like sub and comment deserve
background music name ?? 😂😂
Is that background music really necessary? Not only is it irritating but plain unwanted!!!
@HowToCodeSchool
Ай бұрын
Feedback taken, thank you. (:
could you please attach the files of this? i want to use it for reference :)
@HowToCodeSchool
Жыл бұрын
You can use the code from here: www.howtocodeschool.com/2021/01/simple-dropdown-menu-using-html-and-css.html#video-tutorial
@hadjer9958
11 ай бұрын
@@HowToCodeSchool thanks!!
no code, no like
@HowToCodeSchool
3 ай бұрын
Code is available on our website: www.howtocodeschool.com/2021/01/simple-dropdown-menu-using-html-and-css.html
How do I make the dropdown smooth and not so abrupt?
@tomcoop9750
Жыл бұрын
Instead of using “display block” make the height change and add a CSS transition to the height value to animate it.
Thanks 👍