Seona,
http://alistapart.com/articles/dropdowns/
This is the best implementation I've seen so far, and I'm using it in a client site to be launched next week.
Works and extensively tested in: Win IE 5.0, 5.5, 6.0 Win Moz 1.0.2 Win Firebird 0.7 MacOSX Safari 1.0 MacOSX Mozilla 1.0.2 MacOSX Firebird 0.7 MacOSX Camino 0.7 MacOSX Omniweb 4.5
Fails in: IE5Mac on OSX and Classic Opera
Hidden From: NN1/2/3/4 with @import IE1/2/3/4 with @import
The beauty is that there's no javascript for real browsers, and a little for IE. Better still, you can use an IE-only conditional comment to target only that browser with the JS.
The original article couldn't get Safari to work, but somehow I stumbled upon a solution last night, which I'm yet to figure out, but I'll report back when I do.
I choose to import an Opera-only style sheet with PHP to set the sub-menu's to display:none; on all opera browsers, rather than spend the extra time on debugging that browser as well (not enough return on investment).
I choose to have the top level list items as links to the major sections of the site, and choose to list the sub-navigation on every page, so that users falling outside of my tested browsers (plus Opera and MacIE5) would have the best chance possible of getting where they need to go. In all my testing, I haven't found a case where accessibility was prevented.
I don't really have time to dig through your code, so all I can do is offer an alternative :)
Justin French
On Friday, January 30, 2004, at 10:48 AM, Seona Bellamy wrote:
Hi guys,
Well, after lurking on here for several weeks, I'm finally taking the plunge
and asking a question. (And getting rather alliterative in my subject
line... Sorry...)
I have a navigation bar with sub-menus based on the list structure and run
primarily by CSS. The problem I am having is making it work in both IE and
any real browser (using Mozilla for testing). If I get it to that the
submenus are correctly positioned in Mozilla, then in IE they are floating
halfway across the screen and impossible to select. If I get them correctly
positioned in IE, then in Mozilla they sit over the main navigation bar and
so are impossible to see, let alone select.
The page can be viewed at: http://d1075184.u42.b-20.net/ The CSS can be viewed at: http://d1075184.u42.b-20.net/clinics.css
Incidentally, I have the CSS validating just fine (which I'm quite proud of,
given how new I am to this *grin*) and I have the page itself almost
validating. According to the W3C validator, there are only 3 problems left
and I can't figure out how to fix them. If anyone wants to take the time to
have a look at that and point me in the right direction, it would be
appreciated. Funnily enough, the problems seem to be with the code
Dreamweaver put in when I asked it to make a new file that was XHTML
compliant. *shrug* Go figure.
Cheers,
Seona. --- Outgoing mail is certified Virus Free. Checked by AVG anti-virus system (http://www.grisoft.com). Version: 6.0.573 / Virus Database: 363 - Release Date: 28/01/2004
***************************************************** The discussion list for http://webstandardsgroup.org/ *****************************************************
*****************************************************
The discussion list for http://webstandardsgroup.org/
*****************************************************
