• 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
https://www.neowin.net/forum/topic/926142-css-border-on-a-drop-down-menu/
Share on other sites

8 answers to this question

Recommended Posts

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

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

    • No registered users viewing this page.
  • Posts

    • Not $299 as it runs the same hardware SOC as the S25+ and ulltra and such but yes it should be cheaper like Maby $500
    • Apple releases massive slide deck to help children convince their parents to buy them a Mac by Usama Jawad The competition between Windows PCs, Apple Macs, and Chromebooks is fairly decent when it comes to the education sector. Chromebooks are typically priced very competitively but are sometimes underpowered. Windows offers wide compatibility with software but may increase overall licensing costs, and finally, Mac offers similar benefits to Windows coupled with premium hardware, but is the most expensive of the lot. That said, these are mostly generalizations and your mileage may vary according to your use-case. However, Apple is now ready to help children convince parents that a Mac is the best device for their educational needs. Over on its website, Apple has published "The Parent Presentation", which is an 81-page slide deck aimed at children in order to facilitate them in convincing their parents that they should buy their children a Mac. The slide deck is available in multiple formats including PowerPoint, Google Slides, and Keynote. Needless to say, the slide deck does serve a business purpose but it's also fairly humorous in tone. For example, slide 7 speaks from the point of view of the presenter (the child), saying that they'd love to take their parents to college with them but since that's not possible, they would like to take a Mac to college instead. Then, slide 11 talks about refers to "thoroughly researched evidence" that proves that a Mac is the superior option because it is durable, reliable, and "compatible with my major". You get the gist. That's not all though. Apple has released an accompanying YouTube video on the same topic by comedian Martin Herlihy, you can check it out below: Of course, it's quite unlikely that any child will actually use this slide deck to convince their parents. But it's all in good fun and makes for an interesting marketing gimmick. If you don't want to bother downloading the massive slide deck yourself, you can view it online in Google Slides too.
    • well if we go back in time to 2013 the LG G2 phone that i owned was the best on the market at the time 5.2" LCD 1080p display it had 4gb of Ram ( might have been 3GB ) android KitKat out of the box but was upgradable to Android 6.0 it had the best Built in Audio Dac 24bit/192khz playback Hi-Fi audio and a snapdragon 800 2.2ghz Quad core and 32gb of storage and the Camera was top notch at the time . but beyond that what help make it really good was a3,000mAh that allowed 20hrs of video playback and 26.7hrs of talk time and the Phone was only 5.45" (H) x 2.79" (W) x 0.35" (D) now compared to the galaxy S25 edge that is 158.2 x 75.6 x 5.8 so we have come along way since the LG G2 ( Miss that Phone) but i think the edge while yes smaller battery and camera is less still has its place and people who will buy it
    • Reasons are unknown? Yeah, the reasons are, it wasn't needed when you already have the S25 plus out. It was a stupid waste.
    • Muskrat is a liar (saying no driver needed) just like Trumpette, the Putin puppet. It's so sad they had a lover's quarrel! They worked so well together being lying buddies. One and the same.
  • Recent Achievements

    • Week One Done
      BlakeBringer earned a badge
      Week One Done
    • Week One Done
      Helen Shafer earned a badge
      Week One Done
    • First Post
      emptyother earned a badge
      First Post
    • Week One Done
      Crunchy6 earned a badge
      Week One Done
    • One Month Later
      KynanSEIT earned a badge
      One Month Later
  • Popular Contributors

    1. 1
      +primortal
      673
    2. 2
      ATLien_0
      277
    3. 3
      Michael Scrip
      234
    4. 4
      Steven P.
      166
    5. 5
      +FloatingFatMan
      159
  • Tell a friend

    Love Neowin? Tell a friend!