Home/ Questions/Q 7030995
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T00:44:41+00:00

After setting up a new CSS:hover menu it works great across the board…except in

  • 0

After setting up a new CSS:hover menu it works great across the board…except in IE (doh!). You’ll see that in IE9, the menu content is completely invisible but strangely it still makes a shadow. Image below comparing the result:

CSS menu shadow in IE9

What I’ve Tried

I’ve tried two methods 1) Adding a transparent PNG background as reported by some as a solution, and 2) adding Microsoft hover behaviours (csshover.htc).

Code below

.nav {}
.nav li {float: left; position: relative; z-index:10; }
.nav li.search-li {padding: 14px 8px 14px 5px; width:21px; height:26px;}
.nav .search-li ul {width:343px; text-align:center;}
.nav .search-li input[type="text"] {margin:0;padding:5px 10px; border:none; height:20px;font-size:16px;font-weight:bold;border-radius: 3px;}
.nav .search-li input[type="submit"] {padding:5px 10px; height:30px; border:none;background:#0066CC; color:#FFFFFF;font-size:16px;font-weight:bold;border-radius: 3px}
.nav li a { font-family:'LeagueGothicRegular'; margin: 4px 0 0 0; padding: 10px 13px 14px 10px; display: block; font-size:22px; color: #fff; text-transform: uppercase; text-shadow: 0px 1px 1px #444;}
.nav li:hover {
    background: #222222; /* Old browsers */
    background: -moz-linear-gradient(top, #45454E 0%, #222222 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#45454E), color-stop(100%,#222222)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #45454E 0%,#222222 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #45454E 0%,#222222 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #45454E 0%,#222222 100%); /* IE10+ */
    background: linear-gradient(top, #45454E 0%,#222222 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35353e', endColorstr='#222222',GradientType=0 ); /* IE6-9 */
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 0px;
    -moz-border-radius-bottomleft: 0px;
    -webkit-border-radius: 6px 6px 0px 0px;
    border-radius: 6px 6px 0px 0px;
    text-decoration: none;
    box-shadow: 5px 3px 5px #15151e;
}

.nav li ul {
    padding:16px 5px;
    display: none;
    position: absolute; 
    top: 53px; left: 0; z-index: 1000;
    background:#222222;
    -webkit-box-shadow: 5px 3px 5px #15151e;
    -moz-box-shadow: 5px 3px 5px #15151e;
    box-shadow: 5px 3px 5px #15151e;
    -moz-border-radius-topleft: 0px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    -webkit-border-radius: 0px 6px 6px 6px;
    border-radius: 0px 6px 6px 6px;
} /* sub nav starts here */
.nav li:hover ul {display: inline-block;} /* suppport in ie7 and on */
.nav li li {float: none; display:inline-block; z-index:1001; background:url(images/transparent.png) #222222; }
.nav li li a {width: 135px; height: 19px; float:none; margin: 0; padding: 4px 12px 0; font-family:Arial, Helvetica, sans-serif; font-size:13px; text-transform:capitalize; }
.nav li li:hover {background:none; box-shadow: none; border-radius:none;}

Any suggestions or known fixes are very much appreciated!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    OK. My suspicions are right. The problem is definitely with this line:

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35353e', endColorstr='#222222',GradientType=0 ); /* IE6-9 */

    Comment it out and the problem goes away. Will see if I can find a fix which allows the site to work AND a gradient…

    • 0