HomeХобби и стильRelated VideosMore From: Ralph Phillips

Cascading Drop-down Navigation Menu with CSS (Part 1)

2299 ratings | 517188 views
Use CSS to convert a nested unordered list into a multi-level, drop-down, cascading navigation menu. Centered navigation bar Demo File: http://www.sixminutessmarter.com/demofiles/webdev/cascading-menu-centered.html Fixed header navigation at top of page. Demo File: http://www.sixminutessmarter.com/demofiles/webdev/cascading-menu-fixed.html Center the Nav Menu: https://www.youtube.com/watch?v=XRJq1DqYcPs Block vs No-Block: http://www.ralphphillips.com/youtube/links.html Position Absolute: http://www.youtube.com/watch?v=5S1PtC4wRAg Z-index when Positioning: http://www.youtube.com/watch?v=WisFFeOsMIs
Html code for embedding videos on your blog
Text Comments (326)
Mark Feliciano (30 days ago)
hello.. can you tell me how did you get the domain of html?
shengda university (1 month ago)
I do like your fixed cascading menu. One big problem when I click on the menu to open a new page, the menu is gone when the new page opens. Can you tell me how to have the menu fixed on every new page is opened?
Ralph Phillips (1 month ago)
To put the same navigation menu on all of your pages, check out https://youtu.be/z2U81BhQwx8
Sara Hargrave (2 months ago)
Hi Ralph, thank you for the feedback. I was able to get to the scripting code. Hope you don't mind too much, but i would like to work with the navigation code i have started and incorporate your code into mine to create sub menus. Below is my code and what i looks like on the page live. Would you please take a look at my code and share with me how to create sub menus like you did? <style type="text/css"> body { margin-left: 100px; margin-right: 100px; background-color: #FFFFFF; } body,td,th { font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 16px; } .container { overflow: hidden; background-color: #19335b; font-family: Arial; } .container a { float: left; font-size: 14px; color: #ffffff; text-align: center; padding: 14px 16px; text-decoration: none; } .dropdown { float: left; overflow: hidden; } .dropdown .dropbtn { font-size: 14px; border: none; outline: none; color: #ffffff; padding: 12px 14px; background-color: #19335b; } .container a:hover, .dropdown:hover .dropbtn { background-color: #536582; } .dropdown-content { display: none; position: absolute; background-color: #f9f9f9; min-width: 140px; box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); z-index: 1; } .dropdown-content a { float: none; color: black; padding: 12px 16px; text-decoration: none; display: block; text-align: left; } .dropdown-content a:hover { background-color: #ddd; } .dropdown:hover .dropdown-content { display: block; } img.wrap {float: left} </style> In my case (code below), i would like a rarrow sub menu for the Forms and Resources Materials link. <div class="dropdown"> <button class="dropbtn">Destination 2026 <span class="darrow">&#9660;</span></button> <div class="dropdown-content"> <a href="u:/General Information/Information Hub/site/destination_2026/destination_2026.html">About Destination 2026</a> <a href="u:/General Information/Information Hub/site/destination_2026/strategicprojects/sp.html">Strategic Initiatives & Projects</a> <a style="margin-left:10px" href="u:/General Information/Information Hub/site/destination_2026/strategicprojects/sp.html#forms">Forms and Resource Materials</a> </div>
Sara Hargrave (2 months ago)
How can I obtain the code you used in part 1 and part 2 videos?
Ralph Phillips (2 months ago)
Sara Hargrave Hi Sara. Check the video description for a link to the demo page where you can view the source code.
piano0011 Lee (4 months ago)
I have tried some tutorials to add sub menus to the right and I hope that this works... Do you provide any online support? I am just wondering why do you have two sub1 menus?
rockabyebaby (5 months ago)
this tutorial gives a big help for me to create my own website. thankyou so much, keepo doing tutorials :)
R H Rubel Hosen (7 months ago)
what is markup language????
Gerry G (9 months ago)
I have a quick question: so when I was doing postion relative, it wraped around and did not do what is doen in the video,got no clue why
gerald njima (11 months ago)
Nice job ,getting you very well.Very helpful .Great teacher of this world
Bernadette Sloan (1 year ago)
New to coding and for the first time the penny dropped.... will always now refer to your stuff first.
Daniel E Kisinza (1 year ago)
Your tutorial is too helpfull in the sense af learning, thanks alot
Annie Finder (1 year ago)
Thank you so much for sharing, this is awesome training video.
better life (1 year ago)
you are good thanks
sajjad jafri (1 year ago)
Sir, when i am using another div just below to this navigation bar and in this div i paste some picture. Now when i hover the mouse over shop, account they display nested list but the problem is my below div gets displaced when nested list opens
Carissa Walker (1 year ago)
This has been very helpful for me. Nice, clear, and easy to follow.
Slow Easy English (1 year ago)
Ralph, if all your videos are this well explained, you really deserve a lot more views and all the money that comes with it. I don't know why all your other videos aren't getting more love. Maybe the thumbnails aren't snazzy enough or some of the titles a bit too long? I don't know, but this was a quality lesson and more people need to be watching your vids.
Joseph M (1 year ago)
Hi This might be a minor problem but its driving me mad. When I put in the reset rule the bullet points disappear. Ive tried this on a completely blank page in case any other css interfered with it and on the site I'm working on. Ive checked the html list tags a hundred times. its definitely only when i put the reset rule in. I need to get this sorted for a project soonas. Thanks J.
Slow Easy English (1 year ago)
The reason you can see the bullets in Ralph's video is because he set the body's padding to 50px, forcing all the content away from the edge of the page.
Joseph M (1 year ago)
Hi Thanks for the reply, but how come when you view it in your browser you/we can see the bullets? Plus I notice that there seems to be a border around the whole page as the line under the navigation title doesnt go all the way to the edge and the nav list is not all the way at the very edge of the browser. Can you explain where this edge border comes from. Thanks
Ralph Phillips (1 year ago)
Joseph M the bullets really aren't disappearing, but they are off screen. When you add the reset rule the margins change to zero and the list item text goes to the left edge. The bullets are off the screen on the left. If you put some margin-left on your ul or the li, you'll see the bullets again.
George geo (1 year ago)
thank you bro !!!
Leona Noble (1 year ago)
coding hu...you are magic, I'm just learning to make my site but not with code!, you make it interesting and worthwhile to watch this, it helps you have a nice normal voice...fatseeds.ca
Nasser GASMI (1 year ago)
where we can find the CCS script?
J. John Mario (2 years ago)
Amen. Finally someone who can explain the topic without a dialect barrier.
Shaquille Mandy (2 years ago)
These two videos were extraordinary!!!
Bilal Gill (2 years ago)
Sir you are life saver :) God bless you even more <3
The Entertaining Cloud (2 years ago)
thanks a lot
The Ginger Gamer (2 years ago)
What would you d for multiple lines of text in the one "border"?, the red border that is.
Mugabi Muhammad (2 years ago)
Ralph why are you too good. This is a nice tutorial
Genius Bantoo (2 years ago)
You set fixed width of anchor tags, what if content in sublinks anchor tags gets bigger, do the anchor tags respond accordingly. Nice explanation BTW.
NeZversTutorials (2 years ago)
jonkeydude (2 years ago)
nice video i like it
Ole Reashore (2 years ago)
Thank you very much for the great tutorial. Works like a charm !
Arun Suthar (2 years ago)
i like your tutorial.. thanks...may God bless you..
Rubiya Rajamanikam (2 years ago)
thank you very much it is really helpful to me....
stan gurule (2 years ago)
mine was working fine until I got to the style nav menu , then it stopped working
Peangjai Kampirapang (2 years ago)
Thanks for shearing. it really helpful !
VIKASH SHARMA (2 years ago)
Space Ghost (2 years ago)
thank you so much!
Hi Ralph, You made an excellent video! I was wondering if you can make a tutorial video how to post multiple articles on one webpage as a link in html? converting word documents to webpage does not work because it will open another page and the head and other parts of Css disappear. Thanks for the tutorial video!
Brian Waltz (2 years ago)
Excellent video, this does exactly how I want my top navigation to work. I'm having problems getting it to work with a CSS file. Is there more to watch?
giovane santos (2 years ago)
Great video
amoon alshehhi (2 years ago)
Very cool, I have applied, but I have a problem I want to be in the middle of the page How can I do that? Thank you
Ralph Phillips (2 years ago)
+amoon alshehhi Check out https://www.youtube.com/watch?v=XRJq1DqYcPs
John Richardson II (2 years ago)
Sir, this is a great video
Chaz DeSimone (2 years ago)
Ralph, besides an overall great instructional, it's refreshing to hear a professional, clear, friendly voice that does not sound like a mumbling teenager, standup comic or geeky nerd. The yellow dot really helps, too. Thanks! PS I just realized who you sound like: Leo LaPorte (The Tech Guy). He is so easy to listen to.
legion2k (2 years ago)
Thanks man, I know this is old but it's one of those things I've sort of ignored how to make from scratch. Thanks for helping clear that up. :)
Tommyb (3 years ago)
Check out my channal if you want some help or some tips! would be awesome !
alok mazumdar (3 years ago)
very nice video , struggled a lot during college till as professional to get around this stuff, thanks for such an awesome video. I would be grateful to you if you could also upload some video on website layout(using div tag , box-model)
janekalam (3 years ago)
Hi Ralph, Thanks so much for sharing this awesome job. Could you please let us know, which color scheme (template) you are using for your Notepad++. The colour combination is very sharp and beautiful. Thanks
Zainal Abidin (3 years ago)
wow...really awesome videos. But still having problem with links for sub menus. Please kindly to provide tutorial of adding links on drop down menus. After all, thank so much to Mr. Ralph.
Moning Meow (3 years ago)
hello iwant to know how t create organizational chart using tags can u teach me please .. :D response
Prince K (3 years ago)
nice one..i love it ...but which editor are u using
Nadzeya (3 years ago)
hello , thanks for this video , however i found myself lost , idk where i did the mistake , i do not have notepad ++ and i work with SoftChris Html is that the reason it is not working ? It's the first time i ever work with this i just saw a friend who had a home work as creating an html site , nd got interested nd excited nd started watching videos to try TuT Please Help ~
Abdulsattar Suleman (3 years ago)
thanking you your video is very helpul for me infact us. I want any video about java script can you help me
speedlight57 (3 years ago)
Hey Ralph, using the code that created this navigation menu is there a way to center the buttons on the screen? Also, having placed other elements on the page the navigation section ends up being relocated. I was trying to put an banner on the page using <div> tags and with the #navmenu section only using <ul#navmenu> part it gets placed over the banner. Thanks.
Asmat ullah (3 years ago)
Israel (3 years ago)
Thank you!! Greetings from Mexico
TheoryFactor (3 years ago)
When I add this code to my theme on shopify I have an issue with the drop-down menus disappearing unless I hover the mouse directly down where the arrow is at. I also have an impossibility of accessing the drop-down menu from the side. I am unable to even highlight it, even with hovering the mouse directly of the line where the arrow is at. The menu appears to work fine outside of implimenting it on my shopify site. Any suggestions?
Smitty Picard (3 years ago)
great tutorial. I tried doing this in a fluid layout and couldnt get it to work.
Nathan shinana (3 years ago)
very nice! thank you.
FuckinGumba (3 years ago)
God damn! You explain sooooo well. Keep it up, i love it!
RP Trucker (3 years ago)
Very good and helpful for someone like me who is just learning.  What font style and color scheme in Notepad++ do you have it set at for all your editing?
Ralph Phillips (3 years ago)
+Rich Puskarich In both Notpad++ and Sublime Text I use similar themes called Blackboard. I don't know the font at the moment, but I like sans-serif fixed-width fonts like Andale Mono or something similar.
Mike McClelland (3 years ago)
only part way thru part 1, but props for starting from scratch, explaining it as you go, makes it easy to follow. thanks!
Raúl Alvarez (3 years ago)
Great Ralph..! need some help on how to add some role based security to this menus???  thanks...
Jess B (3 years ago)
great tutorial. really appreciate it!
Mahesh Mishra (3 years ago)
very good video
News Box (3 years ago)
if you made the list items and some of them are overlapping, try displaying them as 'inline-block' not just block elements. and use a padding of about 3-5px,
bogdan (3 years ago)
what does that : < ul class="sub 1 "> i don't understand , its a sub section for the list ? at 3:08 Thx a lot for the tutorial !
Peter Bates (3 years ago)
This is a very good alternative solution to javascript dropdowns. I have used it on a site that I'm doing for a client. But he thinks the dropdown menus and text are too small. The text can be bolded or made higher than 9 pt in the CSS code. But how do you make the dropdown menus wider to accommodate bigger text (say 10 pt bold)? Thanks in advance.
Normala Brato (3 years ago)
you confused me at the start...
Yannick Bass (3 years ago)
Fantastic ..very well explained fella
muhammad khan (3 years ago)
Excellent video. Exactly what I was looking for. Thank you
Nguyen Van Lap (3 years ago)
Amba Prasad Reddy (3 years ago)
Thanks Buddy.... Awesome presentation
Harry Jorden (3 years ago)
Ralph, I was wondering if you could help me with my html coding. I'm having alittle trouble positioning the navbar in the center. Could you help me. I have gone through your video and I have done all of my wanted sections.
Kartikeya Gupta (3 years ago)
Hi Ralph!!! Thanks for the great video!  10:29-- when you added the "position : relative" to bring all the sub-menu below their parent menu(s), I did the same but all the menu and sub menus are aligned right next to each other.. any idea where I botched up?  
Abdul Moiz (3 years ago)
your next video bro ? please send me link 
Sorin Bighiu (3 years ago)
Hey Ralph, first of all, great video. I like the way you explained everything.     But I encountered an issue. The spacing between navmenu, sub1 and sub2, is too much . I copied the source code from the demo file. But, same issue . http://i.imgur.com/67JW0Zj.png Please help ...
Jake Adams (3 years ago)
Where can I download the program you're using?
OMy AchinHead (3 years ago)
great video, Ralph!  Thank you.  Is there a place to copy the code for this?
MASHIKUR RAHMAN (1 year ago)
Dear, thanks for reply, but I can not understand which language this is. please, help to have this in English.
OMy AchinHead (3 years ago)
I'll add an HTML comment noting you as the Author of the cascading menu and I can add a a URL I think.  I'll use the YOUTUBE URL.
OMy AchinHead (3 years ago)
Sorry for the dumb question!!! Thanks again!
Ralph Phillips (3 years ago)
Check the video description for a link to the demo file. View the source code and copy away.
Bebe Menil (3 years ago)
Is this menu works on all screen.  Like ipad and android?
Ralph Phillips (3 years ago)
+Bebe Menil Yes, but the drop-downs will display on tap (not on hover). However, using a cascading menu like this for a mobile device is not practical. Best to convert this to a single column list display. Check https://www.youtube.com/watch?v=rAVQh2gfIfc for an idea.
D Jones (3 years ago)
Thank you for totally explaining this concept so easily. The best I have tried to follow and utilize. Much better than explanation in Dreamweaver CS6 Audio Manuel!!!
Dota 2 Player (3 years ago)
thanks bro!
Sandra Lower (4 years ago)
Unfortunately I cannot get this to work past rules for navigation .Tried everything and all code so far is right - checked and checked
Ralph Phillips (3 years ago)
+Sandra Lower Check my demo files (links in the description). Copy everything as is and see it work. Then go through and start changing one thing at a time to get a feel for how each CSS declaration impacts the finished menu.
Kostantin Rokai (4 years ago)
Great video Ralph !!
Sunny Choudhary (4 years ago)
Thank you for the video.It helped me lots.
Upgrade (4 years ago)
not working for me!!!
Karthik b (4 years ago)
Awesome presentation thanks for the tutorial....it really helped me........Once again thanks Phillips
Steve (4 years ago)
Thank you for the video. My sub-menu items are not aligned beneath the parent menu; they're offset to the right by about 10px. I assume this is because the bulleting pushes them. How do I align them? thanks again
Ralph Phillips (3 years ago)
+Steve Comstock  Double-check my demo files (link in the description). Sounds like you might need a css reset rule. If you google "css reset rule" you'll find more info. If you look at my demo file, you'll see the very first rule is a reset rule that removes all default margin and padding.
Dawn R Stahl (3 years ago)
send me your code iwill try it
TRWWM (4 years ago)
Thank you  this video set has really helped me lots. I have seen,many videos and your videos are great. keep up good wrk.
Blackhawk Appache (4 years ago)
Will this work for side nav menu?
mustafa kenany (4 years ago)
hello and thank for your video how can I duplicate the code without copy and paste in Dreamweaver ?? why we make the class of hyperlink 4 is same with hyperlink 2 because there is in same hyperlink its parent or there is another reason??  why we use unordered list can we use order list or NOT ??  finally thank you very much about this video I ask god to protect you SIR
hamza jamal (2 months ago)
press ctrl+d to duplicate he gave both the same class name because they are both styled the same way
Jerry B (4 years ago)
???  Great presentation.  Thanks for taking the time to make it. HOWEVER, there is a basic technique that is missing from every youtube  menu making video and this is it.  If I have Top Menu tab A.  Tab A has a submenu with Tab A.1  and Tab A.2.  Given that Tab A actually represents a page, what if a client cllicks on Tab A?  Just Tab A.  Not move down and click on a submenu items like Tab A.1 but just clicks on Tab A.  I want to make absolutely nothing happen in that case.  Not a reload as that will cause a blink.  Just nothing.  Anyone know?  Thanks.
Ralph Phillips (3 years ago)
+Jerry B Two methods... Desktop no problem. User can hover over tab A to display the sub menu. The user can choose to click on Tab A or click on a sub tab A.1, A.2, etc. I do like all parent menu items to lead to a page. I want every button, link on a web page to function and get the user to content. Even if that content is a directory page. It's possible to make a non-hyperlink look like any of the menu items, but that breaks a usability standard. However, mobile would be the issue. The sub menu would only display on tap. So, user would need to tap on tab A to gain access to A1 and A2. Solution would be to NOT use a sub menu system for a mobile device. Instead, display a button for every link that leads to a page.
thank you very much and please show me how fix body hight and width with this menu?
Grace Armstrong (4 years ago)
Absolutely AWESOME! I'm learning so much from you. This is truly great! Thank you!
Clint Norwood (4 years ago)
Thank you. This is so very helpful.
Iroshan Vithanage (4 years ago)
woah..you types so fast...!!!!
Harjeet Manihas (4 years ago)
Thanx a lot....it works...upload more.
ZinkPT (4 years ago)
Why my submenu (smneu1) show side by side horizontal ?
Scott Mike (4 years ago)
Ralph, Can you add a video/tutorial on overlay dropdown menus...well i like your mode of explanation...regards
wu yan (4 years ago)
very nice tutorial.. thx and god bless you and the world.. ^___^
Brian Petersen (4 years ago)
My menu went from being like yours to vertical

Would you like to comment?

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