Expert: Andrew Hoffman - 2/19/2008

Question
Hi Andrew,

I was wondering if you could answer a CSS question for me. I found a cool horizontal css menu:

http://www.projectseven.com/tutorials/navigation/auto_hide/

And I tried to use it on my site:

http://thehotelchelsea.com/allie/

It seems like I can't get the little menu bar to stay in the right place. When I seem to have it right in Firefox (on a MAC) my friends who have PCs say that they see it funny so I'm starting to feel helpless.

Is this kind of menu impossible for cross-browser purposes? Ideally I had wanted to make something like this:

http://www.ikies.com/overview.html

Thank you so much if you can help me!!

Allie

Answer
Allie,
I'm not certain what this will do to Firefox Mac, but try adding the following CSS properties to what's already there.  Just add the properties (e.g., position: relative--not the whole surrounding CSS rule).


/* line 177 */
#p7menubar li {
position: relative;
}

/* line 119 */
#p7menubar li ul {
top: 75px;
}

Basically, this says:

Give the list items holding the initially invisible drop-down lists a relative position.  This gives the absolutely positioned invisible drop-downs some context.  Now, these hidden lists are absolutely positioned with respect to their relatively positioned parents (the first-level list items).  This is working in Firefox Windows, so hopefully it won't break the Mac version.