title: Drop Shadow bug in IE9
body: <p>If you look at the main navigation menu on <a href="http://andrewfinden.com/test/" rel="nofollow">this page</a> you see that I'm using a drop shadow on a:hover, however, in IE9 the shadow is buggy - it doesn't always show, and often remains after the hover is no longer active. I want to either fix it, or get rid of the shadow only in IE.</p>
  
  <p>my css is:</p>
  
  <pre><code>    #menu a {
    color:#fff;
    padding-top:10px;
    padding-right:10px;
    padding-left:10px;
    text-decoration:none;
  
  
  
  }
  
  #menu a:hover {
  
   background:#e58f56;
   border-top: 0px solid transparent;
   border-bottom: 10px solid transparent;
   border-left: 10px solid #bbb2b1;
   border-right: 0;
   border-top-right-radius:5px;
   border-bottom-right-radius:5px;
  -webkit-box-shadow: #888 4px 4px 4px;
  -moz-box-shadow: #888 4px 4px 4px;
  box-shadow: #888 4px 4px 4px;
  
  
  
  }
  </code></pre>
  
  <p>Any ideas?</p>