Vertical Dropdown Navigation Menu Part 1

http://www.thewebtuts.webs.com/
Vertical Dropdown Navigation Menu Part 1

Please rate + subscribe + comment

How to build a 2 tier dropdown css menu, xhtml and css, with hover effect.

In this lesson I will show how you ca adapt the css code for your dropdown menu to make it a vertical pop out drop out down menu. This is pure css 2 tier dropdown etc css styles menu system for a website.

You can find the html code for it here, just copy and paste it.
http://thewebtuts.webs.com/

You will require a text editor such as Dreamweaver, Notepad ++, Visual Studio or Expression 4 Pro, or a similar program

Category:

Education

Tags:

• Vertical
• Dropdown
• Navigation
• Menu
• Part
• css
• html
• codes
• web
• design
• free
• website
• tutorial
• lesson
• plans
• graphics
• How
• to
• Build
• Tier
• Horizontal
• Pop
• out

[WHATYAAAAAAAAAAAAAAA]

Ok I got it working but the menu is being hidden behind the main body div to the right. How do i get it so that the drop out menu is first?

Thanks

[TheWebtuts]

@WHATYAAAAAAAAAAAAAAA --- to view the css for this add /CSS/vertExp.css to the end of my web address 3 x W dot thewebtuts dot webs dot com /CSS/vertExp.css hope this helps

[56delta]

thanks for sharing. it really helped me develop my nav system.

[TheWebtuts]

@56delta no problem, glad it helped

[israelda1]

Assume I just wanted to use images without text for my menu links and sub links. would I just inject that into the css?

[TheWebtuts]

@israelda1 Yes set the images as background instead of color and don't put text in the html area.

[WHATYAAAAAAAAAAAAAAA]

Any chance you can send me the CSS. I've spend the last hour trying to figure out why mine won't give the dropdown menu when I hover it! I can't find my mistake!

[israelda1]

@israelda1 please disregard I got this to work properly I just need to better my typing skills! Great videos!!!!

[israelda1]

@TheWebtuts First off Thank you for your quick response!!

Ok so I complete all the css code except for the "sub sub menu" (because I don't need to go that far) I changed the font to arial but it has times roman showing. Also my second level "dropdown" does not line up directly next to the corresponding "main list items" I'm not sure what I did wrong? lastly my sub menu is showing and not hidden at all? Am I not placing the id tags correctly with the html? This is all new to me!

[StefanosKoutelis]

scratch my previous post, I did exactly what you told me actually :P