Well I have a two level horizontal navigation. I have two problems with what I currently have. 1. In IE6 the second level links are vertical on separate lines instead of being horizontal like in FF. 2. I wish the current pages sub links to be displayed as default. For example if you were on the page linked to by menu item 1 then items under menu item 1 would be displayed until you hovered over a different link. You can view my coding so far: http://www.fuvz.com/sporting/index.html 3rd link has the sub links applied. Would be every link on actual website though. All help is appreciated.
before I forget: you have to close the html comment surrounding the CSS [missing -->] .. I'm trying to fix the 1st problem
I think I have solved the first problem. Only one left is the 2nd now I think. EDIT: New problem. Sub links don't disappear so multiple links are on each other. You can see by hovering over multiple links.
It has some problems. First, you cannot start an ID name with a number, you must start it with a letter.
Without the Js, I'd have the normal links, with the subs having visibility: hidden and visibility: visible for making them appear and dissapear. To make each page's menu always show, every page has a class on that particular link called "current" or something, with visibility set to visible. But the Js in there does other things. I had to turn my Javascript on to see the menu. I keep it off by default; if I were using Lynx browser or JAWS or something, there would be no menu. : (
Hmmm, after looking at it again, I can see the advantage of keeping the menu there while the user does stuff on the rest of the page. So, you could keep the Js but what it needs to do is when one of the main menus is hovered over, before it displays the submenu it needs to clear whatever's there first. Kinda like what happens on the second mouseover. That way, the menu will stay like you want, but when people move the mouse from main menu to main menu, the submenus don't pile up on each other. I dunno Js so I dunno how you'd do this, but it's gotta be as simple as adding an extra clearing command at the beginning of the mouseovers... then remove the second mouseover for clearing.
I have changed to a purely css navigation. Only two problems which I have and cannot fix. 1. Main Links only the top is a link. If you hover over bottom nothing happens. 2. Sub links are higher than active. When padding is changed is puts backgrounds out. Coding: http://www.fuvz.com/sporting/index2.html
What I'll do when I'm done eating and having my walk is I'll look at Stu's version first and then see how I can change it to look/act like yours. When I first copied a Stu menu, I found half of it didn't work and I had to begin with his first and go backwards (making it more like mine). I also elimited a third of the code but needed to add more because my menu had more changes than his. But usually there's more in his code than you need. I'll see if I can -get it working -with minimal code But I'm still not good enough to slim stuff down yet. And someone else may beat me to it, which is likely : ) but it's good exercise for me.
Hmm, actually, I can see that the ones below ARE links; the bottom of my browser shows them changing addresses as I mouse over. Not sure what this means... to me, the subs look like they sit in the middle of the background-grey bar thing and they don't move as I mouse over or click (active).
Okay, I saw the problems with IE6... I've made a menu, but for some reason I can't get the drop-down part to work right in IE6... I'm so close, it's some one little thing but I can't figure out what that is. http://stommepoes.jobva.nl/Menus/stuformikka.html Sooooo close... and I've added back all the junk Stu had like font-size for the empty invisible tables... nothing : ( His menu itself works on IE6 so I know the code is in there... but even after adding back everything I took out as frivolous, still no go. As a side note, Konqueror (and thus maybe Safari) has too much space between the menu levels... I tried removing any default padding or margins on bottom of main menu or top of submenu, but the padding on the top of the sub-menu is needed for every other browser : ( Tested so far in FF1.5, 2, Konq, Opera on Linux and Windows, IE7,6,5.5, Lynx and Jaws. Damn.
Something stupid: no unit measurement on width of subs. Duh. http://stommepoes.jobva.nl/Menus/stuformikka.html Only thing, doesn't do anything on hover of subs in IE6 dunno why, they are <anchors>... Enjoy! (also PMd to you)