HomeНаука и техникаRelated VideosMore From: techsith

creating a drop down navigation menu using pure css and html

743 ratings | 119759 views
Creating a multi level dropdown navigation menu bar with pure css and html . Step by step coding instruction with explanation using Jsfiddle.net Code example to play around with or copy to your project. . -We will first crete a horizontal menu bar and add vertical drop down list for each item . - On the mouse over of the horizontal bar item the vertical dropdown would show up. drop down navigation bar css drop down navigation menu using css drop down navigation menu in html creating a drop down navigation menu bar using pure css () css horizontal drop down menu Pure CSS Dropdown Navigation bar
Html code for embedding videos on your blog
Text Comments (166)
VeteranSlayer (1 month ago)
Great video dude. Thanks a lot. I believe though that you should use display:none; and display:block; for the submenu to be visible/invisible. If you dont then when the cursor hover over the invisible menu it will appear.
chris chin (3 months ago)
can send the code for me, my mail address is [email protected]
taslima ena (3 months ago)
excellent video...its very helpful...thank u so much
şüheda ertürk (3 months ago)
so helpful
PrOScANneRD!V (4 months ago)
Replace > with a one-character spacing.
Felipe Lima (4 months ago)
muito obrigado :D
Maria Jannat (5 months ago)
Thanks. It was helpful
dominic Stokes (5 months ago)
can i send you my code?
dominic Stokes (5 months ago)
i tryed to use the function i created to look similar to your and couldn't get my function to call the dropdown can i email my code to you?
techsith (5 months ago)
Sure, what is the issue
FarhanN (6 months ago)
Very good technique... Understood
Anoop Tp (6 months ago)
You showed multi-level menu in the thumbnail, but instead made a tutorial on a simple sub menu.
Hasan Parasteh (6 months ago)
How can i have another sub sub menu in sub menu class?for example i want to have a menu with cars - computers - drinks... and in sub menu of cars i want to have BMW - Toyota ... and here is my question how can i add another sub menu for BMW sub menu to show models for example X3 - X4 and etc.?
nakiew (7 months ago)
Thank you very much for this tutorial. It helped me a whole lot.
piano0011 Lee (7 months ago)
I need some assistance here.... I am trying to add a drop right menu to my assisting website but it is not lining up correctly, could you assist me?
piano0011 Lee (7 months ago)
thanks for your kind assistance but how would I do that? would I use code pen and paste it here?
techsith (7 months ago)
Sure can you send a fiddle and send it to me .
piano0011 Lee (7 months ago)
Yup... can I send you my code to have a look? I have created a class called games and would like that to be on the right hand side but my padding is off. Can you have two words for the nav menu? I tried to put Member's section but it pushes the second word underneathe...
techsith (7 months ago)
Sure , so instead of left you want it right?
Mona-Effect (7 months ago)
you're smart
Rafa Martinez (7 months ago)
Great video! Btw to anyone that struggled with the dropdown li's, @19:20, that required an opacity of 1 to reveal itself follow this path instead if you don't get any results. Which is to start with the parent element (.navlass in this video's example ) and navigate your way down the children (ul then li) with the greater than signs (>). Here you go: .navClass> li:hover .sub-menu { opacity: 1; } It worked for me, contrary to what this video showed me which produced no results, but then again this vid was made in 2015, so that specificity might have been a new protocol you must now follow with CSS3.
Toni Priatna (8 months ago)
what is software ide use?
techsith (8 months ago)
its Jsfiddle.
Manish Ray (11 months ago)
This was really helpful video for learning & understanding easily for beginners.
Abbygale Rowe (1 year ago)
Can you please send me the source code?? [email protected]
Ravi Ka (1 year ago)
Hello sir, Ur tutorials are awesome. Can you create a new tutorial on popups, I always have trouble understanding how popup works. If possible cover few areas like 1. How to transfer the input field data between the mainpage to popup window and popup page to main window . 2. Same popup tobe called on anyplace of the window
Anamul Haq (1 year ago)
Sir, please tell me whats the right arrow code in html which you use "&#9660" for down arrow. Thank you
Djaya Angga (1 year ago)
not even 720p
Djaya Angga (1 year ago)
the quality is super shit
joel miracle (1 year ago)
i follow ed everystep but the navClass li:hover .sub-menu {opacity:1;} still not giving any eresult
techsith (1 year ago)
Do you have jsfiddle i can take a look
Lucas (1 year ago)
tinny cloud (1 year ago)
thanks bro.one of the best tutorial ever.
techsith (1 year ago)
Thanks for mentioning it :)
Mohan M (1 year ago)
totally wrong concepts which u used
EasyLife NGO (1 year ago)
I liked it, but how i can add onather sub-menu for example on mac so that it will show ---> drivers and other stuff only for mac
Umar Qadeer (1 year ago)
I passed my cursor over the invisible dropdown, it still appears, what should i do to make it only appear by going on the original li??
Simon Xie (6 months ago)
Did u fix the bug now? Pls tell me how to. Thx
S Kumar (1 year ago)
yar navigation to samajh me aa gyi but apne ek page se other page pr move krke dikhao. please [email protected]
preeti singh (1 year ago)
is it responsive design.. i am actually looking for something which is responsive , if you ahve any link please let m know
Bytler (1 year ago)
watch at 1,25 - Thank me later.
techsith (1 year ago)
Thanks :)
Wil McDowell (1 year ago)
Your video was a nice addition to a text book chapter focusing on links and lists. A bit of advice for anybody learning web design, programming, or IT is use the internet to find a new perspective on a topic you are having trouble with.
Romy Kim (1 year ago)
Damm, this can be done with css. I tried doing it with javascript. It worked but, this version is 1000 times simpler. Thanks.
techsith (1 year ago)
Thanks for watching!
Antek Ketna (1 year ago)
This magnifying arrow is a bad idea. You can't see the whole line and the view is deformed. Otherwise your tutorial is excellent.
Tariyuki (1 year ago)
I have a problem, I insert an <image> below the dropdown menu, when I Hover over it, the <image> changes position. How do I fix this so that the image will not move when I hover over the menu?
techsith (1 year ago)
Can you create a js fiddle and send me the code? also are you using a border-box?
Mahesh Poreddy (1 year ago)
Thank you TechSith. That's a great video with a clear explanation of how to create a drop-down list from scratch. But using 'opacity' is still taking the space on the web page even when it's set to '0'. So I used display:none(default) and display:inherit('on hover'). Will there be any consequences using the display like that? Here is the full code: https://codepen.io/iMahesh/pen/wdPjbg
Jhaimun Castelo (1 year ago)
Hi Mahesh, the html ans css code i apply t my blog, but its not working. See below http://jhaimunwelcomepage.blogspot.ae/
Mahesh Poreddy (1 year ago)
Hi Castelo, Thanks for looking into my pen. Can you be specific what the actual problem is? If you are unable to figure out the problem, send me the link to your pen I will try to help you. If you are using Google's blogger I recommend Bootstrap, itoffers responsive dropdown menu.
Jhaimun Castelo (1 year ago)
Hi Mahesh, Please kindly help me out for your codepen, not working to my blog. i like you design. please advise. https://codepen.io/iMahesh/pen/wdPjbg Thanks
techsith (1 year ago)
In the same pen?
Mahesh Poreddy (1 year ago)
techsith, with the inspiration from your video, I spent few extra minutes and made it multi-level drop down as well as little design changes.
Zeni Tarja (1 year ago)
great job! i have a problem..when i make the opacity:1; ,i don't change null
Zeni Tarja (1 year ago)
is okey thanks
techsith (1 year ago)
what do you mean by you dont chage null?
Jigar Mistry (1 year ago)
how to remove underline <li><a href="#graduate">Graduate</a></li>
Jigar Mistry (1 year ago)
ok thank you bro
techsith (1 year ago)
just add a:link {text-decoration: none; }
don orden (1 year ago)
Opacity :1; is not working on my second sub class
shiva allam (2 years ago)
Thank you for given this information, it's very very helpful to me, and it's easy to understand for fresher's, and i want know how to use animations in design projects and how to use java scrip in designing, Please give replay.
techsith (2 years ago)
Do you have a specific project in mind? What is your javaScript level?
KaylaG1510 (2 years ago)
everything works for me except for some reason the background colour of the sub menus?
fatmir nuredini (2 years ago)
Big Like for this video thanks a lot
techsith (2 years ago)
thanks for watching!
Ruwini Kumarasinghe (2 years ago)
Thank you very much....... It was very helpful to me.......
techsith (2 years ago)
thanks for watching! :)
gggccc (2 years ago)
anyone know how to put the text closer to the top??
techsith (2 years ago)
do you mean text inside the div?
missanonymouse (2 years ago)
HI! I really like your video but I have a problem. When I put the opacity:0;- yes! it worked. but when i put the opacity:1; it didn;t. Help me please! Thank ^^
jaanu2222 (2 years ago)
thats a good video , btw i am a noob but my html /css fundamentals are pretty good cleared now , i gotta little problem where you used "opacity" inside ul.sub-menu , which may not show but it'll actually there , and if a user clicks on that blank area where the list is not showing , it'll still be active , you should use "display:none;" inside sub-menu , and inside .navclass li:hover sub-menu {display:block; } in order to avoid accidental clicks on the blank/hidden list area , sorry for my bad english -_-
padmaja patil (1 month ago)
Yes i am also with u yoooo;)
inglouser (2 years ago)
Thank you! this bug was killing me.
techsith (2 years ago)
Agree.. thanks for the comment.
KNOW PAIN (2 years ago)
Nice one, But I am thinking what is the purpose of having the nav tag
KNOW PAIN (2 years ago)
But we can also make the same thing with just ul tag
techsith (2 years ago)
nav tag is used to represent block of nav links. You can use div instead but it makes more sense to use nav for readability purpose.
Ruben Margaryan (2 years ago)
This is good video Thank You!!!
Little Narwhal (2 years ago)
I like the video, but by using that technique, if your mouse passes over the invisible dropdown, it will still appear, how do i make it so it only appears by going on the original li?
Mona-Effect (7 months ago)
thanks alot
Gabriel Warner (1 year ago)
thanks man
Bob spok (1 year ago)
Change "opacity: 0" with "visibility: hidden" and "opacity:1" with "visibility: visible"!
new dev (1 year ago)
did you find a solution mine does the same
Tariyuki (1 year ago)
I have a problem, I insert an <image> below the dropdown menu, when I Hover over it, the <image> changes position. How do I fix this so that the image will not move when I hover over the menu?
Harish Saini (2 years ago)
this is good video to explain step by step so that anyone can understand easly ... I like this ....
LAXMAN KUNDLI (2 years ago)
how to upload my webpage in online...???
techsith (2 years ago)
Is it a personal server? If its a personal server, you can upload it by just copy pasting your conntent on to the server. if its managed by third party like godaddy or so , they usually provide ftp so you can use that.
LAXMAN KUNDLI (2 years ago)
yes sir
LAXMAN KUNDLI (2 years ago)
yes sir
LAXMAN KUNDLI (2 years ago)
yes sir
techsith (2 years ago)
do you have a server? y
mike abdallah (2 years ago)
great! Thanks for that
ali badreddine (2 years ago)
hey can you please help? i did everything like you said in the video but the arrow doesn't appear with the title(car for example) it is alone and when i want to click on a sub-title (ford) for example i can't because when i remove the cursor from car the list disappears. thanks
Nadiah Nafira (2 years ago)
Hello, Thanks for your video sir. Everything going well but on the sub-menu I cannot click on the second sub-menu. can you help me?
Nuhash The Precious (2 years ago)
how to take them in the center
József Nánási (2 years ago)
Hello! My problem is, you can hover to the submenu simply and its a problem. I mean i can hover directly to the submenu without the main menu. Can you help me?
Branislav Valasek (2 years ago)
Hi, I have same problem, did you find the answer to this yet? Thanks.
Great video! Cheers mate!
An Trinh (2 years ago)
hey. thx 4 the lesson, I did a few mistakes and Im kind of lazy of find my mistake. can u put your scripts on download link or something u can show us? thx
An Trinh (2 years ago)
I ty so much again
techsith (2 years ago)
I will create a fiddle and attache in the description of the video. Probably tomorrow.
pratik shukla (2 years ago)
hello .please help me resolve my problem. I am making a menu that is vertical and on the top left there is a menu icon so when I press the menu icon the menu comes out. and u have also added a paragraph beside it ,out of the menu in the body part.. so I want to make that when the menu icon is pressed the paragraph should move to the width that the menu have...so the paragraph should not hidden.and from your tutorials I have also made it possible.. now when I put other options like in you video..then the paragraph should move that width forward... please provide me your mail ID so u can give you some photos if it and explain in better way
pratik shukla (2 years ago)
what's your full mail ID..
techsith (2 years ago)
you can email me on bayperson
Hugh Lambert (2 years ago)
helllllllpppppppp. The buttons does not go anywear.
OstenTV (2 years ago)
just add a <a href="url">My Site</a> inside the <li>
Nate L (2 years ago)
Thanks for the video.  Everything worked good for me except two things. I could not get the drop down opacity to be visible again. .navClass li:hover .sub-menu {  opacity: 1; } The arrow is outside of the hover affect.  It does not change the background color around the error.
joel miracle (1 year ago)
thanks mate ! i also faced the same case as you .. now it is visible by your code
ali badreddine (2 years ago)
thanks for the help!
Nate L (2 years ago)
I don't remember exactly, but I think I had my ending </li> tag in the wrong spot.  The code in the video was correct, I remember that.
ali badreddine (2 years ago)
hey can you please tell me how you solved the problem of the arrow being outside the hover effect? thanks
Avee (2 years ago)
Thank you
Akalya Mohan (2 years ago)
Hi I have some doubts. I created menus and sub menus but opacity is not working for me. I gave back ground color white and font color black. when I gave opocity 0 then it disappear and if I give opocity:1 in sub menu class then its not appearning. Please help me
techsith (2 years ago)
Can you paste your code here if you dont mind. I can take a look
Mark M (2 years ago)
Anyone else sick and tired of the NRA ads?
Ayy Lmao (2 years ago)
This is a really good , step by step explained video, props to u my friend and thanks for this video.
Wosley Alarico (2 years ago)
Thanks a lot for the tutorial. it really helps Do you have a mobile version for this menu?
techsith (2 years ago)
Mobile version would be very diffrent, I will try to make it but not right away. check back in a month or so. Bit busy this month. Thanks for watching.
you dont need put put .navClass>ul if you put only .navClass ul the system will understand, it also apply to .navClass ul li ( check it out in css style sheet and you will see )
Carl John Lopez (2 years ago)
but while its opacity is 0 , you can still click them? i mean the sub-menu?
Carl John Lopez (2 years ago)
ok thanks, very helpful btw
techsith (2 years ago)
You cant becase as soon as you move your focus from main menu, it will close and with it will close the sub-menu ( basically the whole menu area is going to be display none)
Jessica Khatri (2 years ago)
Hi,Thankyou so for this video, it did help a lot. But please, how do I implent the Drop Down onto Blogger, the CSS is not working when I Copy & Paste.ThankyouJessica
techsith (2 years ago)
margin-left: 250px !important; You can add !important at the end of each line for that style to have more priority.
Jessica Khatri (2 years ago)
at the beginning at the end? where exactly? Example I want to add a signature to my blog posts but nothing is happening when I paste this into the css... .entry-content:after { content: url(http://lh6.googleusercontent.com/12345ABC/image.png); margin-left: 250px; } thankyou xx
techsith (2 years ago)
When you copy and paste to blogger, css for blogger would interfere with your css. You have to go through inspect element and fix it. you can overwrite some of it using "!important"
Ranjeet Gautam (2 years ago)
really it was interesting and helped me a lot, thank you very much for this vedio
techsith (2 years ago)
Thank you for watching.
DHAWAL JAIN (2 years ago)
thanku sir my dropdown is overlapping with main menu what should i do
OstenTV (2 years ago)
ul.navsub { margin: 2px 0 0 0; }
techsith (2 years ago)
can you send me the code. I will take a look
Vojtěch Bobčík (2 years ago)
it is much better to use "display:none" and "display:block" than "opacity:1 / 0" . with opacity the sub menu is still there but you just dont see it... if you hover over place under the nav button the sub menu will display (set´s opacity to 1)
syed alamin (2 years ago)
Oh thank you sir solve my self the problem by the code visibility: visible
syed alamin (2 years ago)
/*opacity:0;*/ visibility:hidden When I am gonna writing visibility:hidden in exchange of using opacity then submenu is not showing so what need to do to show sub menu in this case?
techsith (2 years ago)
display:none is like the element is not in the dom. but opacity:0 means the element is there and holds its space butnot visible. you can also use visibility:hidden instead of opacity:0
George David (2 years ago)
video is blurry cannot see and you voice is low without headphones,
Jeet Singha (2 years ago)
thanks sir!
Mansoor khan (2 years ago)
Thanks for such a wonderfull drop down menu
Ahmed Noor (2 years ago)
please create a playlist of ur JS tutorials in basic to advanced order. Thanks and good tutorial :)
MAHESH iT Online (2 years ago)
Well structured video, what is the pointer video you are using to explain. thanks for upload
techsith (2 years ago)
+Mahesh IT Online which pointer video?
Jordi Hoven (2 years ago)
Thanks man very clear tutorial. Get rid of the zoom function though, makes me a bit dizzy... Kudos!
Avee (2 years ago)
XO PIXEL (2 years ago)
Great tutorial, I also recently made a video on how to code a dropdown navigation menu, check it out!
mohammed yassin (3 years ago)
thnx man i like it where i search about it
Raja Poonkgaran (3 years ago)
<a href="https://www.google.com">Hello</a>
Glotzie (3 years ago)
thx man, realy nice, but i think the zoom function isnt't realy necessary.
techsith (3 years ago)
+Glotzie you welcome. Thanks for the advice on zoom.

Would you like to comment?

Join YouTube for a free account, or sign in if you are already a member.