Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Como posso preencher uma cor no meu menu horizontal que funcione no IE9.
Sempre quando coloco uma cor no menu apenas não funciona no IE9.
Exemplo de linha de código que não funciona no IE9:
#cssmenu{border-color:#000;background:#61230C} <!-- o background não funciona no IE-->
Segue código com problema:
</body>
</html><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd](http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd)"><html xmlns="[http://www.w3.org/1999/xhtml](http://www.w3.org/1999/xhtml)">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="menu/styles.css" rel="stylesheet" type="text/css"> <!-- menu da página -->
</head>
<body>
<table width="1156" height="1010" align="center">
<tr>
<td height="48"> </td>
<td colspan="3" align="center" valign="top"><div id='cssmenu'>
<!-- \\menu da página início-->
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li><a href='Artigos.html'><span>Artigos</span></a></li>
<li class='has-sub'><a href='#'><span>Ma</span></a>
<ul>
<li><a href='#'><span>Amor</span></a></li>
<li class='last'><a href='#'><span>Paz</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Pi</span></a>
<ul>
<li><a href='#'><span>Abstrato</span></a></li>
<li class='last'><a href='#'><span>Paisagens</span></a></li>
<li class='last'><a href='#'><span>Pessoas</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Qua</span></a>
<ul>
<li><a href='#'><span>Cida</span></a></li>
<li class='last'><a href='#'><span>Ade</span></a></li>
<li class='last'><a href='#'><span>Ro</span></a></li>
<li class='last'><a href='#'><span>Be</span></a></li>
</ul>
</li>
<li><a href='#'><span>Quem somos</span></a></li>
<li class='last'><a href='#'><span>Contato</span></a></li>
</ul>
</div></td><!-- \\menu da página fim-->
<td> </td>
</tr>
</table>
</body>
</html>Agora o código em CSS, onde ocorre a configuração:
#cssmenu{ height:40px; display:block; padding:0; margin: 0; border:1px solid; border-radius:5px;}
#cssmenu > ul {list-style:inside none; padding:0; margin:0; position:relative; 50%;margin-left: 150px;width: 990px;}
#cssmenu > ul > li {list-style:inside none; padding:0; margin:0; float:left; display:block; position:relative;}
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 20px; font:bold 15px/100% Comic Sans MS, cursive; text-align:center; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.4); }
#cssmenu > ul > li:first-child > a{border-radius:5px 0 0 5px;}
#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid; top:-1px; bottom:-1px; right:-2px; z-index:99; }
#cssmenu ul li.has-sub:hover > a:after{top:0; bottom:0;}
#cssmenu > ul > li.has-sub > a:before{ content:''; position:absolute; top:18px; right:6px; border:5px solid transparent; border-top:5px solid #fff; }
#cssmenu > ul > li.has-sub:hover > a:before{top:19px;}
#cssmenu ul li.has-sub:hover > a{ border-color:#3f3f3f; padding-bottom:13px; padding-top:13px; top:-1px; z-index:999;}
#cssmenu ul li.has-sub:hover > ul, #cssmenu ul li.has-sub:hover > div{display:block; border: 1px solid #222;}
#cssmenu ul li.has-sub > a:hover{border-color:#3f3f3f;}
#cssmenu ul li > ul, #cssmenu ul li > div{ display:none; width:auto; position:absolute; top:38px; padding:10px 0; background:#3f3f3f; border-radius:0 0 5px 5px; z-index:999;border-color:#3f3f3f; }
#cssmenu ul li > ul{width:200px;}
#cssmenu ul li > ul li{display:block; list-style:inside none; padding:0; margin:0; position:relative;}
#cssmenu ul li > ul li a{ outline:none; display:block; position:relative; margin:0; padding:8px 20px; font:11pt Comic Sans MS, cursive; color:#fff; text-decoration:none; text-shadow:1px 1px 0 rgba(0,0,0, 0.5); }
#cssmenu, #cssmenu > ul > li > ul > li a:hover{
background: #333333;
background: -moz-linear-gradient(top, #333333 0%, #222222 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#333333), color-stop(100%,#222222));
background: -webkit-linear-gradient(top, #333333 0%,#222222 100%);
background: -o-linear-gradient(top, #333333 0%,#222222 100%);
background: -ms-linear-gradient(top, #333333 0%,#222222 100%);
background: linear-gradient(top, #333333 0%,#222222 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#222222',GradientType=0 ); -webkit-box-shadow: 0 3px 10px 0 #ccc;
text-shadow: 0px 0px 5px #fff;
border: 1px solid #fff;
font-family: Comic Sans MS, cursive;
}#cssmenu{border-color:#000;background:#61230C}
<!-- o background não funciona no IE-->
#cssmenu > ul > li > a{border-right:1px solid #000; color:#fff;}
#cssmenu > ul > li > a:after{border-color:#444;}
#cssmenu > ul > li > a:hover{-webkit-box-shadow:0 3px 10px 0 #ccc; text-shadow:0px 0px 5px #fff; border-radius:#fff; }
Carregando comentários...