• Sign in to Neowin Faster!

    Create an account on Neowin to contribute and support the site.

  • 0
Sign in to follow this  

CSS - Border on a drop down menu

Question

Bollard    0

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

Share this post


Link to post
Share on other sites

8 answers to this question

Recommended Posts

  • 0
Cupcakes    151

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.

Share this post


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

Share this post


Link to post
Share on other sites
  • 0
Bollard    0

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

Share this post


Link to post
Share on other sites
  • 0
Cupcakes    151

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.

Share this post


Link to post
Share on other sites
  • 0
Bollard    0

Setting position relative destroys my menu :(

Share this post


Link to post
Share on other sites
  • 0
Cupcakes    151

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.

Share this post


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

Share this post


Link to post
Share on other sites
  • 0
Bollard    0

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.