Forum Moderators: not2easy

Message Too Old, No Replies

really stumped on how to inherit top property

CSS positioning problem

         

icpooreman

11:22 pm on Jul 5, 2005 (gmt 0)

10+ Year Member



hey I'm building a menu using an unordered list like this.
<ul>
<li><a#>link1</a></li>
<ul>
<li> <a#>sublink1</a> </li>
</ul>
<li><a#>link2</a></li>
<ul>
<li> <a #>sublink2</a> </li>
</ul>
</ul>

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.

bedlam

2:49 am on Jul 6, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well, in the first place, you should validate your markup [validator.w3.org]. A nested list does not look the way you've shown in your post. It should look like this instead:


<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>

icpooreman

3:38 am on Jul 6, 2005 (gmt 0)

10+ Year Member



Thanks that worked well. I'm an idiot who spent all his time examining his CSS and just assumed I was nesting the lists correctly. I guess it's true what they say about people who assume things.

Anyway Thanks alot.