Question

This menu works great, except my background disappears in Opera and Internet Explorer plus any tips on better Explorer compatibility would be awesome.

It’s also using foundation.css from the foundation framework if your familiar with that one.

If you want to see it in action: http://www.pink-realty.com

    .elephant-menu {
        width: 100% !important;
        height: 40px;
        z-index: 50 !important;
        opacity: 1;
        background: url(../images/misc/button-gloss.png) repeat-x 0 -34px, -moz-linear-    gradient(top, rgba(255,255,255,.4) 0%, transparent 100%) #e51d9b;
        -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255,255,255,.5);
        -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255,255,255,.5);
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.52), inset 0 1px 0 rgba(255,255,255,.5);
        text-shadow: 0 -1px 1px rgba(0,0,0,0.28);
        background: url(../images/misc/button-gloss.png) repeat-x 0 -34px, -webkit-    gradient(linear, left top, left bottom, from(rgba(255,255,255,.4)), to(transparent)) #e51d9b;
        border: 1px solid rgba(229, 33, 155, 1);
        -webkit-transition: background-color .15s ease-in-out;
        -moz-transition: background-color .15s ease-in-out;
        -o-transition: background-color .15s ease-in-out;
        text-transform: capitalize;
        font: 16px "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
        margin-left: 0;
        margin-right: 0;
       }

    .elephant-menu li { 
    list-style-type: none !important;
    text-transform: capitalize !important;
    font-weight: bold;
    color: white !important;
    text-decoration: none !important;
    float: left !important;
    position: relative !important;
    font-size: 16px;
    padding: 11px 5px 10px;
    display: block;
   }

   .elephant-menu li:hover {
    color: white;
    background-color: #9c126f;
    -moz-box-shadow: inset 0 2px 5px black;
    -webkit-box-shadow: inset 0 2px 5px black;
    box-shadow: inset 0 2px 5px black;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -ms-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
   }

   .elephant-menu a {
    color: white;
    text-decoration: none;
   }

Answer 1

try with adding something like this.. modify your colors and alpha.

.elephant-menu {
 background-image: -o-linear-gradient(top, #FFFFFF 0px, #E5219B 70%);
}