Forum Moderators: not2easy
and I'm using the following css to position the sublinks
#menu ul ul { position: absolute;top:0;left: 100%;width: 100%; float:left;}
now the top:0; works great in IE it positions the elements on the side of the link that it's supposed to be next to. But in all other browsers it will overlap the sublinks at the top right of the menu bar. Does anyone have any Ideas about how to inherit the top property so that other browsers won't do this.
<ul>
<li><a href="#">link1</a>
<ul>
<li><a href="#">sublink1</a></li>
</ul>
</li>
<li><a href="#">link2</a>
<ul>
<li><a href="#">sublink2</a></li>
</ul>
</li>
</ul>
If you think about how this is different from what you posted, you'll realize that in your code, the second-level ul has no parent container. This means that there is no possible point of reference the browser can use to absolutely position the second level list. Instead, the parent list item should only close after the closing tag of the second level list.
To get something like what I guess you want, first fix the markup, and second, try styling the lists like this:
ul li { position:relative; }
ul li ul { position:absolute; top:0; }
-B
<added>Note: in case there is any problem with list items in the second level having the style 'postion:relative;', you may want to add 'ul li ul li { position:static;} to your stylesheet. I don't think it should cause you any problems without that addition though...</added>