• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 525
  • Last Modified:

suckerfish dropdowns

I want to be able to combine two techniques really. But I've sort of hit a brickwall. I can't figure out how to combine CSS Rollovers (mentioned directly below) with Suckerfish Dropdowns. Is it possible? seanpowell, I could really use your help again!

Here's the CSS and HTML for a page where I used a technique from http://alistapart.com/articles/sprites/ called "CSS Sprites: Image Slicing’s Kiss of Death".

margin: 0;
padding: 0;
background-color: #fff;
color: #000;
text-align: left;
#buttons {
width: 574px;
height: 38px;
background:  url(menu.jpg);
margin: 0 0 0 0;
padding: 0;
position: relative;
#buttons li {margin: 0; padding: 0; list-style: none; display: block; position: absolute;}
#buttons a {display: block; border: 0;}
#button1 {left: 0px; top: 0px; width: 123px; height: 38px;}
#button2 {left: 93px; top: 0px; width: 163px; height: 38px;}
#button3 {left: 226px; top: 0px; width: 155px; height: 38px;}
#button4 {left: 351px; top: 0px; width: 143px; height: 38px;}
#button5 {left: 464px; top: 0px; width: 110px; height: 38px;}
#button1 a {height: 38px;}
#button2 a {height: 38px;}
#button3 a {height: 38px;}
#button4 a {height: 38px;}
#button5 a {height: 38px;}
#button1 a:hover {background:  url(menu.jpg) 0px -38px no-repeat;}
#button2 a:hover {background:  url(menu.jpg) -93px -76px no-repeat;}
#button3 a:hover {background:  url(menu.jpg) -226px -38px no-repeat;}
#button4 a:hover {background:  url(menu.jpg) -351px -76px no-repeat;}
#button5 a:hover {background:  url(menu.jpg) -464px -38px no-repeat;}

<ul id="buttons">
      <li id="button1"><a href="#"></a></li>
      <li id="button2"><a href="#"></a></li>
      <li id="button3"><a href="#"></a></li>
      <li id="button4"><a href="#"></a></li>
      <li id="button5"><a href="#"></a></li>

Here's a handy link if you'd like to see the page itself. It's got other code with it, though.

Now here's a page from htmldog.com that gives an example of the type of dropdown menu I'm looking for.

Now, can these two techniques be combined? Will someone please show me how if indeed it is possible? I'd give more points than 500 if I was able to for this.
  • 7
  • 5
  • 3
  • +1
1 Solution
>> can these two techniques be combined?
Yes, but I knew I shouldn't have had that second scotch.

Back in a bit...
MTIWRAuthor Commented:
Here's another example:

In this example I've used the dropdown menus, but if you look at the code, each button has two different images. I'd like to keep the same look that I've got now, but only use one large image like I did in the first example. And not just one large image for each button, but for the entire row of buttons. http://rayandamy.com/tomansys/menu2.html
this might help you -
it is a very basic version of a DHTML dropdown - you will obviously have to style it properly - but it will allow for rollovers and also uses the onMouseOver and onMouseOut events to allow the dropdown to occur.  Good luck with your project!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<script language="JavaScript" type="text/javascript">

function show(){
      menu1.style.visibility = 'visible';

function hide(){
      menu1.style.visibility = 'hidden';



<a href="#" onMouseOver="javascript:show();" onMouseOut="javascript:hide();">Rollover me</a>
<table summary="" name="menu1" id="menu1" style="visibility: hidden;">

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

MTIWRAuthor Commented:
I'd really like to only use CSS only. Is there a way to do that without resorting to javascript?
i dont think so - if you want them to dropdown - you will need to use events such as onMouseOver and onMouseOut.  There is no CSS equivalent of those events (CSS only defines style, not action)
a nice example (of my own creation) can be found at:


it uses text instead of images for the main labels, but it can be easily altered to do what youd like - view the source to see how i did it
MTIWRAuthor Commented:
Okay, I know I said CSS only but what I meant was I wanted an answer that did not rely heavily on Javascript. If you look at the examples I've given, you'll see that only the Suckerfish Dropdowns has Javascript in it, and even then it's only a few lines. I'd like to stick to that if possible. flow79, I'd rather stay with using nested unordered lists too. I don't want to use tables for something that should be marked up as a list.

I promise to give an A to the person who can tell me how to combine those two techniques.
fine - then use a ul and assign the same CSS i gave for the table (visibility: hidden and visibility: visible).  This is not that difficult.  You  keep saying you dont want to rely on Javascript, but you already do (and will have to if you want to use DHTML).  If you dont like my solution, fine, but i'm only here to help, and have provided two examples (one of which is complete - the link).  As you said yourself just now - you said your dropdowns have JS in them.  The amount of JS (whether alot or a little - and believe me, the scripts i've given you are TINY) doesnt matter.  If a user has JS turned off, either way youre out of luck.  I would say try my solution and modify it to what you already have.  Its a very good solution
MTIWRAuthor Commented:
I tried using the source from the link you gave, flow79, but ran into one problem. The code you gave works great for a vertical list, but not so well for a horizontal list. I changed one of the tables to an unordered list and played around with the styles until I got the nested list right underneath the top link "Home". I did that to imitate the conditions I'd use it since I have to use a horizontal list. (See my example from my second post.) The JS you have makes you have to call some element "home" or whatever word you define. I didn't want my ul to show up until I moused over the top link so I gave the ul the id "home". But when I did that, the dropdown list would actually appear when I moused over the list itself and not just the top link. That's a problem because users will end up making the dropdown lists appear when they don't want them to.
Any help?

Also, may I still ask for your help, seanpowell, since you said that my original idea could actually be done?
if you can post the altered code you have created, i will fix it up so that it works properly.
MTIWRAuthor Commented:
Okay, here's the page with the altered code.

Now what about using CSS rollovers and your JS at the same time? That's the real challenge. That's what I really want - CSS rollovers and the dropdown menu.

Thanks for working this, flow79.
Ok, I got an alternate suggestion. I usually build menu's based on a different solution developed by a  guy I know: http://www.xs4all.nl/~peterned/csshover.html

Instead of adding javascript regardless this is a solution which uses a behaviour to create events on the fly to fix IE and enable the :hover pseudoclass on any element (based on what's targetted by your css).
I've prepared an example based on your original link at: http://www.windgazer.nl/eexchange/Q_21097085.html

relevant changes to your css:
#buttons a:hover {background:  url("Q_21097085/menu.jpg") 0px 0px no-repeat;}
#button1 a:hover {background-position: 0px -38px;}
#button2 a:hover, #button1_1 a:hover {background-position: -93px -76px;}
 ul li#button1_1 a { background-position: -93px 0px; }
#button3 a:hover, #button1_2 a:hover {background-position: -226px -38px;}
 ul li#button1_2 a { background-position: -226px 0px; }
#button4 a:hover, #button1_3 a:hover {background-position: -351px -76px;}
 ul li#button1_3 a { background-position: -351px 0px; }
#button5 a:hover {background-position: -464px -38px;}

/*Making submenu's work*/
#buttons ul { margin: 0; padding: 0; border: 0; position: relative; left: 1em; display: none; }
#buttons li:hover ul { display: block; }
#buttons ul li {position: relative; border: 0;}
#buttons ul a {position: relative; border: 0; height: 38px; background:  url("Q_21097085/menu.jpg") 0px 0px no-repeat;}

And at flow79's remark "i dont think so - if you want them to dropdown - you will need to use events such as onMouseOver and onMouseOut.  There is no CSS equivalent of those events (CSS only defines style, not action)".
You do not need those events when using a CSS2 browser. IE needs those events as it is not truly a CSS2 browsers it doesn't even fully support CSS1. Relevant documentation: http://www.w3.org/TR/CSS2/selector.html#x39

Well, let me know what you think MTIWR,

MTIWRAuthor Commented:
Okay, Martin, this is a very nice way of doing drop down menus. I get to use CSS rollovers for everything. But I'm having a bit of trouble! I've only gotten the first button "Main" to work as it should.

Here's a link to what I've done so far: http://rayandamy.com/toms/csshover3.html

Will you please take a look at it and show me how to fix it?
Crazy day yesterday, sorry.
Martin seems to have gotten you back on track nicely.

This is a quick mockup since I promised a suckerfish/sprite solution, but I'll leave you in Martin's capable hands to follow through with his alternative :-)

Well, it took me a while to catch on to this one :) But, how about this: http://www.windgazer.nl/eexchange/Q_21097085b.html

I made a few minor changes to make things work better on gecko browsers, mainly involving giving generally all a-tags in the dropdowns a height:
#buttons a {display: block; border: 0;height: 37px;}
Other than that, something so simple it took me quite some time to notice:
#button2 a:hover {background-position: 49px -37px;}
should have read:
#button2 a:hover {background-position: -49px -37px;}

You were displacing the sprite in the wrong direction :)

MTIWRAuthor Commented:
Can I give both Sean and Martin points for this solution? Both of you guys came up with a really awesome solution to this problem! I'm going to split points with you two unless you'll allow me to ask you one more favor, Sean. I'll start a new question since I've got your solution working beautifully in IE but it wants to act wierd in FF. I'll give all the points to Martin on this on and then give you, Sean, the points on the next question. Can I do that???

Here's what I've got with Sean's solution:
>>Can I do that???
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Python 3 Fundamentals

This course will teach participants about installing and configuring Python, syntax, importing, statements, types, strings, booleans, files, lists, tuples, comprehensions, functions, and classes.

  • 7
  • 5
  • 3
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now