Discuss: Suckerfish Dropdowns
by Patrick Griffiths, Dan Webb
- Editorial Comments
22 No Opera?
I tested it in Opera and it worked fine. It was the latest version (7.2 I think). Maybe it messes up in earlier versions.
Is it the examples that don’t work? What happens?
posted at 04:48 pm on November 7, 2003 by Patrick Griffiths
23 CLIP it!
I havn’t tested it but if “display: none;” causes the content to be hidden from some text-readers, maybe a “overflow: hidden;” and “clip: rect(0,0,0,0);” could be used to hide the sub-menus, and then set “overflow: visible;” to show it for the hover state.
posted at 05:02 pm on November 7, 2003 by LazyJim
24 ZERO HEIGHT it!
LazyJim
I played around with overflow and clip and came up with
http://www.htmldog.com/articles/suckerfish/bones/bones2.html
which does the overflow thing, but sets height to zero rather than using clip.
It seems to work in IE 6 Win, Mozilla 1.5 and Opera 7.2.
I would be really interested to find out what the results are of this overflow method compared to the display method in screen readers, which I unfortunately don’t have access to right now.
posted at 06:01 pm on November 7, 2003 by Patrick Griffiths
25 Opera 7.20
As previously stated, it’s not working in Opera 7.20. Javascript is enabled, there are no javascript errors, I’m on the normal page’s stylesheet.
Version 7.20
Build 3144
Platform Win32
System Windows XP
posted at 10:03 pm on November 7, 2003 by Jean-François Bastien
26 Same here
Same here, Opera 7.20, xp, build 3144, javascript enabled, still doesn’t work. Elmo still sad :(
posted at 11:07 pm on November 7, 2003 by Elmo
27 IE quirks (or me)
First of all thank you very much for this solution. Unfortunately, I’m still at that stage were I’m not sure if it’s me or the browser when it comes to quirks.
I’m scripting my student government website and have been waiting to ditch the milonic menu system (an abysmal piece of dhtml hackery). Anyway, it seems to be working fine in Moz 1.5, Firebird .7 perfectly.
I’ve hit a minor snag in safari 1.1 where leaving the menu doesn’t hide the dropped menus. But I’ll chalk that up to safari seeing as it’s lagging simply refreshing simply color change hover events in the menu.
Moz 1.6a works fine for the most part but only the first few options within the dropped menus are selectable, mousing further down the list causes it to hide as if you intended to leave the menu. Again I’m chalking this one up to the browser and the alpha status.
As far as IE 6 it begins by not showing the drop downs If I use the selector
#nav li ul { /* for second-level lists */ or
ul#nav li ul { /* second-level lists */
I can’t afford to simply use li ul as I do have other sub lists and I figured this was the easiest way to get around applying style to other innocent elements.
Additionally, IE seems to be adding a margin or a border to each li item in the sub list if I do use the general li ul selector where it will work.
I’m really desperate for some help as sadly I’ve had to do this site form scratch by myself with some help from one of my friends back home, troubleshooting these things is becoming tedious (not that you’re strangers to that). If anybody has any suggestions for this scenario I’d love to hear them. Additionally, if you happen to notice any other problems that’d be cool to.
posted at 12:38 am on November 8, 2003 by Michael Czepiel
28 Easier way?
Isn’t there a much easier way of doing this?
ul li a {
display: block;
width: 100%}
ul li a:hover ul {
display: block}
Works in my experience.
posted at 11:03 am on November 8, 2003 by David House
29 Re: Easier way?
‘Fraid not.
You can’t nest a list within an anchor element.
posted at 11:32 am on November 8, 2003 by Patrick Griffiths
30 Opera ...
Great technique. Just what I was looking for. As for the Opera comments, I’m using the still unoffical build 3221 (version 7.22 on WinXP) and it works fine…
posted at 01:07 pm on November 8, 2003 by Louis St-Amour
Discussion Closed
New comments are not being accepted, but you are welcome to explore what people said before we closed the door.
Got something to say?
Discuss this article. We reserve the right to delete flames, trolls, and wood nymphs.
Create a new account or sign in below if you’d like to leave a comment.
Subscribe to this article's comments: RSS (what’s this?)






21 No Opera!!!
No workie in Opera. Elmo sad :(
posted at 04:41 pm on November 7, 2003 by Elmo