• 0

CSS - Border on a drop down menu


Question

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

Link to post
Share on other sites

8 answers to this question

Recommended Posts

  • 0
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.

Link to post
Share on other sites
  • 0
Bollard

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

Link to post
Share on other sites
  • 0
Bollard

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

Link to post
Share on other sites
  • 0
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.

Link to post
Share on other sites
  • 0
Bollard

Setting position relative destroys my menu :(

Link to post
Share on other sites
  • 0
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.

Link to post
Share on other sites
  • 0
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

Link to post
Share on other sites
  • 0
Bollard

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

Link to post
Share on other sites
This topic is now closed to further replies.
  • Recently Browsing   0 members

    No registered users viewing this page.