I am facing a challenge with a div that has an inset box shadow. The issue is that there are links within the div and I want the shadow to display over them while still allowing the links to 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 applied and all the links are inline-blocks.
I have tried various methods like z-index (with positioning), pointer-events, :before, but none seem to work as desired. Whenever I manage to get the shadow above the links, they become unclickable.
This is how it should look; I just need to change the background while keeping the same shadow effect when hovering over the link: https://i.sstatic.net/VUA18.png (I also changed the color in the jsfiddle for better visibility).
At this point, I am open to using jQuery or any other method besides box-shadow; the primary goal is to achieve the correct visual appearance.