Posted by z on 11/06/06 20:35

Ben C wrote:

> On 2006-11-06, z <news01.web@mailnull.com> wrote:
>> Ben C wrote:
>>
>>> On 2006-11-06, z <news01.web@mailnull.com> wrote:
> [snip]
>>>> One more question... is there a way to put a green line below the top
>>>> part of the menu, and have the lower dropdowns appear below the green
>>>> line?
>>>
>>> Of course, there are many ways.
>>>
>>> I've lost track of your original example, but couldn't you just put
>>> something like border-bottom: 2px solid green on the top part?
>>
>>
>> I was trying something like this but it isn't working. The border
>> appears to the right of everything.
>> ul#nav {
>> border-bottom: 3px solid green;
>> }
>
> It's because the <li>s inside the <ul> are floats, so they don't
> contribute to the <ul>'s height, which is auto and computes as zero. The
> border sticks out a bit at the right, for the rest of its length it's
> obscured by the "Menu Option" boxes.
>
> If you make ul#nav also float: left, it becomes the "block formatting
> context root" for the <li>s and so grows in height to fit them, resulting
> in the border being in the right place.
>
> This may not be the best solution in your case though. You'll need to
> post a link to your current version.

I don't have a server that I can post it on at the moment. Here is the
entire file though: http://pastebin.ca/raw/241965

Unfortunately the green line gets obscured by the dropdowns. I don't know
if there is a way around that. The list-style-image that I added didn't
seem to work either.

Other than that, it almost looks exactly right. Also need to look into how
to make a delay for the dropdowns with JavaScript if that is possible. So
that when the mouse leaves the sub-menus, there is a momentary delay before
they disappear.

[Back to original message]