How to make inset box shadow show over child links, but still have them be clickable?

Question

I have a div with an inset box shadow and there are links in that div that I want the shadow to display over, but still have the links be clickable.

Here's an example: https://jsfiddle.net/5rsbn927/

<div id="navigation" role="navigation">
<div id="navbar" role="navigation"> <!-- this div has shadow -->
    <a href="#" id="link1">Link</a><a href="#" id="link2">Link</a><a href="#" id="link3">Link</a><a href="#" id="link4">Link</a><a href="#" id="link5">Link</a><a href="#" id="link6">Link</a>
</div>
</div>

The #navbar div has the shadow and the links are all inline-blocks.

I can't seem to get anything to work. z-index (with positioning), pointer-events, :before, none of it has worked so far. The only time I've managed to get the shadow to show above the links, they aren't clickable.

For the record here's how it's supposed to look; I just want to change the background but keep the same shadow when the link is hovered over: http://i.imgur.com/rOe6uH1.png (also I changed the color in the jsfiddle just so it's easier to see).

At this point I don't really care if it needs jQuery or something other than box-shadow; it just needs to look right.

Answer 1

The image you mentioned does not have an inset shadow but it has only a gradient on the background from white to gray. So you can refer to here .