Vertical Nav not rendering properly in browers on mac and pc

[radiance]

Hello.

I have a vertical navigation on my site which uses a little bit of javascript and lists. I am experiencing a few browser quirks. I don't know how to bypass the quirks.

Thanks in advance...

#1. I need to top align the subnav with their main menu links. I changed the margin-top number, but this seems to render it differently in IE, Netscape, and on Macs. The subnavs are never aligned perfectly.

#2. Is there a way help the user to understand that if the mouse hovers over the main nav, the color will change as the subnav for that option appears?

#3. the subnav menus are too fast for some users. Is there a way to set a timer?

#4. One of the subnavs appears to be resizing itself..which causes the whole menu to wiggle. Is there a way to get past this?

Here's the link for the staging area of the site:

http://creativehandsdc.com/pc

====This is the javascript I am using:====

<script type="text/javascript"><!--//--><![CDATA[//><!--
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls.onmouseover=function() {
this.className+=" sfhover";
}
sfEls.onmouseout=function() {
this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]></script>

==CSS for the menus=======================

#nav, #nav ul { /* all lists */
padding: 0; margin: 0; list-style: none; float : left; width : 100px;z-index:100; }

#nav li { /* all list items */
position : relative; float : left; line-height : 1.25em; margin-bottom : -1px; width: 101px;}

#nav li ul {position : absolute; left: -999em; margin-left : 101px; margin-top : -1em; background-color : #99CCFF; font-weight:bold; width:155px; }

#nav li ul a:hover {color : blue; font-weight:bold; width:155px; background-color:#FFFFFF;}

#nav li a {
width: 11em; w\idth : 10em; display : block; color : black; font-weight : bold;
text-decoration : none; border : 0px solid black; padding : 0 0.5em;}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
left: auto;}

==end of css for the menu=================

 

[Tarwn]

Tried to look at your page but your currently experiencing a CFM error, so I couldn't see the menu

Your missing some of the CSS at the bottom for the rollover.

Tentative answers:
1) Need missing CSS before going further with this one

2) No. There is never a way to make a user understand anything. Don't take this as sarcasm or a joke, it's just a sad fact of life. You can make the color change fr the rollover and display the sub-menu. Expect the user to make the connection since most menu bars on applications work that way. (For instance go up to the menu on your browser and play with it a bit, you will see what I mean).

3) Yes there is a way to set a timer but it would be complicated and, in my opinion, unnecessary. You would have to build in a lot more javascript to handle it and, again, this is the way menus work in applications, so the user should be a little used to it (except that for app menus you have to click and forthe suckerfish menus you just hover).

4) I'd have to se it in action ot understand what is going on

-T