• 0

CSS - Border on a drop down menu


Question

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 comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

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 comment
Share on other sites

  • 0

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 comment
Share on other sites

  • 0

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 comment
Share on other sites

  • 0

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 comment
Share on other sites

  • 0

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 comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.