Hey guys im making a site that needs to have well im not sure what its called im sure its in css though. Any way what I need is a navigation that when hovered over drops out to the side like this below:

Original Nav:
Home
About SSEC
Staff
Services
Store
Photo Gallery
News and Events
Contact

However when one is hovered over it looks like:

Home
About SSEC
• Mission Statement
• History
Staff
• Dr. John.Doe
• Dr. John.Doe
• Office Manager
Services
• Dentistry
• Lameness
• Pre-purchase
• Reproductive
• Vaccinations
Store
• Price Lists
• The Wrap Center
Photo Gallery
News and Events
Contact
• Mailing Address
• Phone
• Email
• Opportunities

Of course I dont want it to be that when you put your cursor over about or store they all hover thats just an example of what they would all look like im sure you guys have seen many like it before. So what im wondering is do any of you guys know a site in which you could direct me? I dont know enough CSS my self to actually write it all by hand and im sure its pretty simple.

 

 

 

Reply

I think this site (http://www.seoconsultants.com/css/menus/tutorial/) has it laid out pretty clean.. The problem with creating a hover menu using only CSS is that it is not VERY compatible! Using a combination of JavaScript and CSS would probably be the best solution!

There is a great example of Suckerfish dropdown menus here: http://www.htmldog.com/articles/suckerfish...ple/bones2.html

You can view the source and edit it to your needs

Reply

That looks like what he needs. That is a good source because that is something I have been looking for as well but I thought it was a JavaScript. Maybe I can use that for my site now if I ever get it back going again.

Reply

awesome thanks alot guys now i just have to tweak it and i may be posting some more replies if i need help tweaking it. I did decide however that i liek this one better which is i belive made by the same person which i also found through the link you gave me any way thanks guys!!
Link:http://www.alistapart.com/articles/horizdropdowns

Reply

http://www.alvit.de/css-showcase/css-navig...es-showcase.php

EXCELLENT site sfor CSS naviagtion techniques.
its all you should ever need
Good tutorials on how to make the navigation look really nice and classy too.
Very 'newbie' friendly too

Reply

Hey guys on this navigation ive figured out most of it, Like the background color and other stuff but how do I make the text and the whole lay out just bigger? what to I type in this area to make it liek twice as large.
Area to put the code in:(i assume)

Actual site:http://www.alistapart.com/articles/horizdropdowns

Reply