title: CSS: "selected" tab and overlapping box-shadow
body: <p>In a nav menu, I'm trying to get selected nav items to display a drop-shadow that is shared with a div that appears attached to the selected nav item.</p>
  
  <p>I've seen a few people accomplish something similar, but nothing exactly, and emulating their ideas isn't getting me there.  I've tried relying on the z-index and positioning, and overflow and padding, but am just not seeing how to achieve this.  </p>
  
  <p>Here's what I'm trying to do:</p>
  
  <p><img src="https://i.imgur.com/GPCh6.png" alt=""></p>
  
  <p>I need the tab and dependent div to appear to share the box-shadow.  Instead what happens is:</p>
  
  <p><a href="http://jsfiddle.net/dilettante/ctHBe/" rel="nofollow noreferrer">http://jsfiddle.net/dilettante/ctHBe/</a></p>
  
  <p>Any answer?  Hoping this is something simple that I've overlooked... many thanks for any ideas.</p>