title: Hover overridden by background gradient
body: <p>Here is the code in action:</p>
  
  <p><a href="http://jsfiddle.net/uop7dz7L/5/" rel="nofollow">http://jsfiddle.net/uop7dz7L/5/</a></p>
  
  <p>This is menu. I used gradient background. When I remove gradients then the a:hover works. But somehow background:gradient is overriding it and disables it.</p>
  
  <p>Any ideas?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#headwrap {
    border-top: 2px solid #F5FBFD;
    border-radius: 4px;
   } 
  #inheader {
    padding-top: 30px;
    width: 973px;
    margin: 0px auto;
  }
  #inheader ul {
      font-size: 0;
      padding: 0 0 0 0px;
      list-style-type: none;
  }
  #inheader a {
      text-decoration: none;
      text-align: center;
      background: #ffffff;
      background: -moz-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
      background: -webkit-gradient(left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #ffffff), color-stop(51%, #ededed), color-stop(100%, #f7f7f7));
      background: -webkit-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
      background: -o-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
      background: -ms-linear-gradient(top, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
      background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
      filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#f7f7f7', GradientType=0 );
      background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #ededed 51%, #f7f7f7 100%);
      display: inline-block;
      font-family: 'open sans', sans-serif;
      font-size: 14px;
      height: 38px;
      line-height: 38px;
      color: #0088CB;
      transition: color 0.4s ease 0s;
      -webkit-transition: color 0.4s ease 0s;
      padding: 0px 23px 0px 22px;
      border-right: 1px solid #0088CB;
  }
  a#contactus {
      padding: 0px 23px 0px 22px;
      border-right: 0px;
  }
  div#inheader a:hover {
      background-color: fuchsia;
  }
  #inheader li {
      display: inline;
  }
  #nesmenu1 { 
  /*width: 972px;*/
  border-bottom: 1px solid #E3E8EB;
  border-left: 1px solid #E3E8EB;
  border-radius: 4px;
  }
  #nesmenu2 { 
  border-top: 1px solid #ECF2F4;
  border-right: 1px solid #ECF2F4;
  border-bottom: 1px solid #CDD1D4;
  border-left: 1px solid #CDD1D4;
  border-radius: 4px;
  }
  #nesmenu3 { 
  border-top: 1px solid #DCE0E3;
  border-right: 1px solid #DCE0E3;
  border-bottom: 1px solid #B1B4B6;
  border-left: 1px solid #B1B4B6;
  border-radius: 4px;
  }
  #nesmenu4 {
  border-bottom: 1px solid #F8F8F8;
  border-radius: 4px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="headwrap"&gt;
    &lt;div id="header"&gt;
      &lt;div id="inheader"&gt;
        &lt;div id="nesmenu1"&gt;
          &lt;div id="nesmenu2"&gt;
            &lt;div id="nesmenu3"&gt;
              &lt;div id="nesmenu4"&gt;
                &lt;ul&gt;
                  &lt;li&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;PRODUCTS&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;SONIC TOOTHBRUSH&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;SONIC TRAVEL&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;SONIC PLUS&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;ACCESSORIES&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a id="contactus" href="#"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/div&gt;&lt;!--nesmenu4--&gt;
            &lt;/div&gt;&lt;!--nesmenu3--&gt;
          &lt;/div&gt;&lt;!--nesmenu2--&gt;
        &lt;/div&gt;&lt;!--nesmenu1--&gt;
      &lt;/div&gt;&lt;!--inheader--&gt;
    &lt;/div&gt;&lt;!--header--&gt;
  &lt;/div&gt;&lt;!--headwrap--&gt;</code></pre>
  </div>
  </div>
  </p>