Need Help With Navigation.

[zach101 0]

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:HomeAbout SSECStaffServicesStorePhoto GalleryNews and EventsContactHowever when one is hovered over it looks like:HomeAbout SSEC? Mission Statement? HistoryStaff? Dr. John.Doe? Dr. John.Doe? Office ManagerServices? Dentistry? Lameness? Pre-purchase? Reproductive? VaccinationsStore? Price Lists? The Wrap CenterPhoto GalleryNews and EventsContact? Mailing Address? Phone? Email? OpportunitiesOf 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.

[Paul 0]

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://forums.xisto.com/no_longer_exists/

You can view the source and edit it to your needs

[Plenoptic 0]

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.

[zach101 0]

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://forums.xisto.com/no_longer_exists/

Edited November 15, 2016 by OpaQue (see edit history)

[Goosestaf 0]

http://www.alvit.de/vf/de/404.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

[zach101 0]

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)

ul li a {	display: block;	text-decoration: none;	color: #777;	background: #fff;	padding: 5px;	border: 1px solid #ccc;	border-bottom: 0;	}

Actual site: http://forums.xisto.com/no_longer_exists/

Edited November 15, 2016 by OpaQue (see edit history)