title: Box-Shadow not carrying out Transition
body: <p>I know this may be a dupe, but I'm willing to take the hit as I feel confident I have researched multiple solutions.</p>
  
  <p>I have tried many methods to get This box-shadow transition to work, including:</p>
  
  <ul><li>Switching between hex, rgb, and rgba colors in the <code>box-shadow</code> declaration.</li>
  <li>Using selectors with more specificity.</li>
  <li>Changing the the <code>transition</code> property to include <code>ease-in-out</code> at the end of the declaration.</li>
  <li>I cleansed the CSS file of any <code>transition</code> properties that could possibly effect the element.</li>
  <li>All the while, triple checking my spelling mistakes.</li></ul>
  
  <p>The inspector says my styles are not being overridden. Here is my code:</p>
  
  <pre><code>.site-header .genesis-nav-menu .menu-item a {
    -webkit-box-shadow: 3px 3px 14px rgb(0,0,0) inset;
    -moz-box-shadow: 3px 3px 14px rgb(0,0,0) inset;
    -o-box-shadow: 3px 3px 14px rgb(0,0,0) inset;
    box-shadow: 3px 3px 14px rgb(0,0,0) inset;
    -webkit-transition: box-shadow 3s;
    -moz-transition: box-shadow 3s;
    -o-transition: box-shadow 3s;
    transition: box-shadow 3s;
  }
  
  .site-header .genesis-nav-menu .menu-item a:hover{
    -webkit-box-shadow: 3px 3px 14px rgb(0,0,0);
    -moz-box-shadow: 3px 3px 14px rgb(0,0,0);
    -o-box-shadow: 3px 3px 14px rgb(0,0,0);
    box-shadow: 3px 3px 14px rgb(0,0,0);
  }
  </code></pre>
  
  <p>What could be happening here to cause this to do nothing?</p>
  
  <p><a href="http://firemanrecords.com/" rel="nofollow">Here is a link to my site</a> for an in context experience. It's the header menu in the top right corner of the page.</p>