In this tutorial you will learn to create your very own dropdown navigation menu using just HTML & CSS. Check out a written version of this dropdown navigation menu on JSFiddle: jsfiddle.net/mj... Thanks for watching - I hope this helps.
I usually never comment under tutorials but I think this really deserves it. It was really helpful and I appreciate the time and effort you put into making this ! thank you so much!
I rarely comment on videos, but this video truly deserves it. 10/10 tutorial. The time and effort put into making this video is unimaginable and I just want to say thank you!
great tutorial. you're awesome at teaching. considering that this is such a confusing topic, you made it easy enough to follow this all the way through with little to no confusion.
Bro you have no IDEA how long I've been trying to get my drop down menu to work. You are a God send man, seriouslly. Since August. That's almost half a year that I've had this project open man. I'm telling you, I was going nuts.
thank you very much for the tips...i spent almost four hours thinking of how to create a drop down but your video just made it very easy for me...please keep the good work once again thank you very much
I've watched several tutorials lately about drop down menus and felt like they were all over complicated. This was one of the first ones I could find that made sense during the first watch. Perfect for a refresher or beginner!
I greatly appreciate the simple methodology you use to make this. Everything I made or saw online was much more complicated for less effect. Thank you for taking the time to make this video!
Thanks a bunch mjdwebdesign, i am an entrepreneur and you have saved me at least a $100 to pay a developer to do this job....very simple and clear...cheers!
I watched with amazement as to how easy it is to create a CSS page and how to link it to the main HTML page. I must have read and gone through many tutorials and still came away with my eyes glossed over. Thank you for clearing this up.
Thank you for this video. I started playing around with HTML5 and CSS3 two weeks ago and am now spending hours and staying up late on the weekend practicing. I wanted to build a great navigation site which is fundamental to a good website, and just couldn't figure it out with other tutorials. The styling was easy but I first wanted it to be functional and dropdown. Your tutorial was the first which allowed me to create it for myself. My code is augmented slightly, no classes or ids, but it works. I had no clue how to hide the second indented list but finally know how from your video, and it's so easy now, just list it after :hover. I didn't know the significance of elements behind the pseudo code, but now I do. Thanks for your help!!!!!!!!
Andrew Young Apprciate the feedback and, thanks for taking the time to watch it. I'm glad to here that the tutorial is helping you out. Good luck with your future work and always keep experimenting. :)
This was great as I hardly know css and due to your explanations on what you do and why you do them I leant more than I could have possibly hoped for thank you very much
I really like the way that you fixed mouse pointer issue. And ofc it's very important that you care for fixing that little things that distinguish pro from amateur.
This tutorial was a life saver. Everything else I found either was too reliant on jquery or didn't allow for functionality within the dropdown. You deserve all their views.
Very helpful tutorial. I'm 18,and picked this up as a hobby a while ago. I read you talking to Tom Bob in the comments, and I have a solution to your video size problems. You can use virtual dub and the xvideo codec to compress your videos and reduce file size a ton. All you have to do is look up on RU-vid is "compress fraps videos easily." I can't post links apparently, so you're on your own for that. TL;DR - I'm a fan, and to compress your videos use virtual dub and Vegas!
Sincere thanks for the video. Menu is really simple and looks really nice. Was able to follow step by step and adapt it to the template I was using pretty easily! You rock!
Oh thank you for the tutorial! I redid my navigation bar by replacing all the elements with yours so as to not confuse myself and I changed some details of the elements to be like my old navigation bar e.g. the colours.
You hit on everything! I am new to this, and at the end when you mentioned how it is a bit intimidating at first; you are correct! I need to re-rewatch it again to catch everything. I had to rewind the part where you noticed the list item tags needed to be moved so that it didnt refer to something else with the hover...but I am eager to try this. One of the best I have seen thus far. Thank you!
Gee Johnson Thank you very much for the feedback. Glad you're finding the tutorial helpful. Yes, you may have to re-watch and re-watch but you'll get it down to a tee soon! :) Good luck, appreciate you watching.
this really help me a lot in my office,i'm still intern and my supervisor told me to make a website,and yeah this is really save me,thank you very much,but maybe you can a little bit slower when explaining,but overall this is a superb tutorial
answer taken from stakoverflow ( author :FactoryAidan ) nav ul li a, visited You are saying two things with this selector A.) nav ul li a selects any without regard to it being visited or not that is a child of but not necessarily an immediate child. B.) visited Does absolutely nothing. If it was valid, it would select any html element of type if it existed, but it is not a valid html element. Any effects you think you see from this are coming from the first selector nav ul li a because it encompasses every contained in your I hope this cleared things up a bit.
Thank you very much for this step by step explanation! I have been having a hard time grasping why each is needed. I look forward to watching your other videos!
Thank you very much. I understand dropdown menus much more now. Hopefully in a near future I'll be able to create amazing menus thanks to you. Thanks again!
Very glad to hear this tutorial helped you, thanks for watching! If you want to find yourself doing more advanced dropdown menus I would recommend watching my most recent video about creating dropdown menus which contain submenus within the dropdown menu. Sounds complicated but the tutorial is linked to this one, if you've already grasped the idea of creating a dropdown menu the submenu should be a piece of cake for you. If you're not using it, it's worth knowing anyway. Go check it out and be sure to get back to me on how it goes. :)
Thank you so much! your tutorial was so helpful. i too was intimidated by the long codes and big css files, but thanks to your video i know see that its mostly just logical and easy coding. you just need to know what to do. Thanks again!
Thank you for helping me with the tutorial on the dropdown menu. I tried it and it works fine. Is there an easy way to add transition to the menu. Keep up the good work, much appreciated.
gazdeeman in terms of transition, I assume you mean a slide in motion once you have clicked or hovered over the dropdown menu? If so, then the way I have done it in the past is to use jQuery.Here's the link for the JSFiddle which contains the jQuery code - jsfiddle.net/mjdwebdesign/v31kdggj/Obviously, changed what is necessary in terms of what the jQuery links to. Also, if you want the dropdown menu to slide down on hover rather than click, you can change ".click" to ".hover".Also, remember that the document in which this jQuery code is being used needs to be linked to jquery.min.js - When doing this I tend to go with Google Hosted Libraries - developers.google.com/speed/libraries/devguide#jqueryAny other questions, feel free to ask, Matt.
No problem - glad to help! Well ... unless you don't pass your ICT GCSE work then... in that case, erm... you were never associated with this video or myself. Haha. :D Good luck. :)
You are so right, one tiny mistake can spoil the whole thing :) Gladly, I found what was wrong with my code and I could carry on creating this drop-down menu :) Thanks for the lesson, much appreciated!
This was very helpful. You explain this way easier than the instructor that I had in school, and other people on RU-vid that was trying to explain it in detail, but seemed all over the place with their explanation. One thing that I was wonder was where did you find the png for the arrow? What was the size of the png in order for it to fit perfectly? Other than that, thank you for making it possible to do dropdown navs.
A KNIGHTS LIFE Pro I created the PNG arrow myself using Adobe Fireworks, I found the correct dimensions through a little bit of trial and error. I have the PNG arrow (for light and dark designs) in a Dropbox folder is you would like it - www.dropbox.com/sh/c3i0ukguzfs7uvr/AABvLJY0x9cvq8X-mw00av4oa Also, glad the tutorial has helped you and, thanks for watching. :)
Really helpful- I have just recently started learning html and css and this was great. Little overwhelming, but very useful. Keep sharing your tutorials
Glad to hear it helped you out! Yes, the code is pretty overwhelming when you look at it all together. In small parts though it's actually a very easy thing to do and it comes out with great results.
mjdwebdesign soooo....I began trying to implement the skills I've learned from your video however, none of the affects are responding to my code (i.e. background color and inline-block display). When you mentioned the browsers that this code is compatible with, you failed to mention Safari (I think that may have been the one to slip your mind.) Do you think the reason for these issues are due to the fact that I am using Safari vs the others? Please advise.
Andre Dulin The code you're referring to (background-color and inline-block) has been around for a long time and is very basic CSS. To think that it is not supported by Safari would be silly. The problem most likely lies within your own CSS, a spelling error or typo. Make sure everything is perfect, the smallest mistake can be costly when programming.
great stuff man!!! this has really helped me get started with my school project as i need to find a video that explained the CSS stuff well and this did so keep up the good work!!!
JBatten Thank you very much for the feedback, I'm going to get back into making these tutorials soon I hope. I just haven't had much motivation to get them planned and completed. Probably the fact that summer holidays has too many distractions like sleep and games. xD Anyhow, glad the video helped you out, that's all that matters.
Hah, yeah.. I haven't used it for ages! It's still on my old hard drive that used to be in my now broken laptop. :/ I should look into getting that hard drive setup on my current computer so I can boot up Ubuntu if I ever feel like it. However, at the moment I prefer using Adobe Dreamweaver as it is much easier managing full websites with it's template feature, very useful.
You're very welcome. It's good to hear that you've found this helpful and have benefited from it. Thanks for watching and commenting - appreciate it. :)
