View Full Version : CSS Drop Down Menu

08-11-2005, 09:28 AM
Hi there,

I really want to create a css drop down menu like the one at http://www.webhostingtalk.com (on the top right-hand side of the page where it says "Find a host".

I want to make it so that when you click on one of "Find a host" selections, the option gets selected (and you are not taken to its URL as it currently is). For instance when I click on HOST QUOTE, I am taken directly to that page. I want HOST QUOTE to be selected instead.

"Find a host" appear to be an image. I would like to have an image background instead, this way when the option gets selected it has the same background as "Find a host".

I've looked at a few tutorials and I've tried to study up on this but can't seem to get it. I can't seem to open .css documents either.

How can I make it so that it gets selected once clicked? I have numerous selections on my site that are all used in one form (this is why I want the option to be selected instead of going to its URL)

Any help on this would be mostly appreciated.

08-11-2005, 10:11 AM
Either you have to use javascript or you are stuck with the limited styling of a <select> box. CSS only isn't going to do what you want it to here.

08-11-2005, 11:31 AM
Yes it is. nested unordered lists and a id for the first list items, not the nested ones.

google suckerfish dropdowns.

Tristan Gray
08-11-2005, 01:52 PM
Yeah I wish I had of found that article 2 weeks ago instead of about 4 days ago. I fought with this wonky javascript nav menu for quite some time before a found a reasonable compromise.

Only disadvantage is that with the javascript menu you can change one file and the whole site updates which is nice. With CSS you need to change the lists on each page.

The suckerfish drop down is perhaps one of the greatest CSS innovations I've seen. MY enxt site will certainly be giving it a shot, they really made it look nice too.

08-11-2005, 06:36 PM
Where can I get a hold of this suckerfish tutorial?


08-12-2005, 01:23 AM
Yes it is. nested unordered lists and a id for the first list items, not the nested ones.

google suckerfish dropdowns.
Unless I completley misunderstood the question, you're wrong. In a suckerfish dropdown, you're creating the sort of menu he doesn't want: one where if you click on a selection, it goes to the url.

Instead, he wants it where, if you click on a selection, it becomes selected. In other words, emulating the behavior of a select box.

08-12-2005, 01:53 AM
[ ignore post ]

I will post in a moment.

08-12-2005, 02:05 AM
Thanks for the help so far everyone.

Here is what I have done today (I spent all day doing it and feel like I haven't accomplished much).


This is exactly what I want, however, there are a few things I really need changed.

When I click on "Option 1" the background goes to "blue.jpg". It should be "test2.jpg" instead.

If I click one of the options and then go back to it, that option has the background of "test2.jpg". It should instead be "blue.jpg".

Also I want there to be zero spacing between images. But when I do this, it seems to scrue up the text...how can I fix this?

Thank you in advance.