/*
We commonly use filter to add gradient feature to Internet Explorer.
Though, if we want to override the gradient with a flat color on Hover for example we must first disable the filter
*/

/*
We use LESS in this example, but we can apply this to any CSS code */

// Top-to-Bottom Gradient
.gradientV(@start, @end){
  background: (@start + @end) / 2; // Non CSS3 browsers get the average color
  background-image: -moz-linear-gradient(top,  @start, @end); // FF 3.6
  background-image: -webkit-gradient(linear, left top, left bottom, from(@start), to(@end)); // Safari 4+, Chrome
  background-image: -webkit-linear-gradient(top, @start, @end); // Chrome 10+, Safari 5.1+
  background-image: -o-linear-gradient(top, @start, @end); // Opera 11.10+
  background-image: linear-gradient(top, @start, @end); // CSS3
  filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @start, @end); // IE6 & 7
  -ms-filter: %("progid:DXImageTransform.Microsoft.gradient(startColorstr=%d, endColorstr=%d)", @start, @end); // IE8
  background-image: -ms-linear-gradient(top, @start, @end); // IE10
}

ul {
    li {
        .gradientV(@color1, @color2);
        
        &:hover {
            /* Here we disable the filter to see the flat color on hover */
            filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
            /* Then we set the hover color */
            background: @color2;
        }
    }
}