CSS - Border on a drop down menu

[Bollard]

Hello all,

Ive got the following CSS drop down menu here which is working fine.

However, im trying to achieve something like eBay where, if you hover over the menu on the top right an border appears around the menu item, and the drop down.

I thought this would be simple enough - put a solid black border around the drop down, and then a black border around the left, top and right of the menu item and set the bottom border to be white - to "cover up" the border-top of the drop down. However, despite the z-index, the drop down always appears ontop of the menu item and i cant achieve the effect im looking for.

Would appreciate some help

Thanks

[Cupcakes]

For example:

 ul.products {
left 87px;
border: 1px solid #000;
margin-top: -1px;
}

You will also need to change add z-index (on the nested UL and the parent UL) so it appears behind it's parent list item.

[Bollard]

  On 02/08/2010 at 17:49, Cupcakes said:

For example:

 ul.products {
left 87px;
border: 1px solid #000;
margin-top: -1px;
}

You will also need to change add z-index (on the nested UL and the parent UL) so it appears behind it's parent list item.

Thanks for the reply.

Thanks what i was kind of doing though. Have a look again (ignoring the annoying inheritance)

With regards to the z-index - im confused! ul.menu li:hover has a z-index of 599 (highest value), yet it still appears below ul.menu ul (with a z-index of 598)?!

Thanks for the help

[Bollard]

Well ive had another go and still cant get the z-index to apply properly? Grrr

[Cupcakes]

I didn't look over but z-index relies on position properties. You'd need position:relative added to both the parent list item and the nested unordered list.

[Bollard]

Setting position relative destroys my menu :(

[Cupcakes]

I'd go over your code then because you shouldn't be positioning anything in your menu since it's a straight horizontal menu. I'll look it over later in the day to see if I can chop it up and clean it up for you.

[Bollard]

Thanks a lot for the help. I didnt build the menu from scratch (i dont have the skills to!) and so chopped and changed this one

Would be really grateful if you could gave a look at it when you have some free time.

Cheers

[Bollard]

With the help of another forum it finally seems to be working as i had hoped! Now to test it with IE6 :(