Submenu nao Aparece no IE

[Prof 2000 0]

Pessoal, nao vi respostas até o momento para algumas coisas. Abaixo meu codigo do menu horizonta css, os submenus aparecem nos navegadores menos no IE, alguma ideia? Assim, tem um flash, em cima tem esse menu.... será que é posicionamento do flash? ja tentei todos posicionamento do flash e nao resolveu!.

Alem disso ele cria uma divisao no final a mais sempre mesmo que nao tem item ele cria... quero tirar.. ajudem no que puderem amigos:

#cssmenu{ height:37px;width:1000px; padding:0; display:block; margin:0 auto; border:1px solid; border-radius:5px;} 
#cssmenu > ul {list-style:inside none; padding:0; margin:0 ; } 
#cssmenu > ul > li {list-style:inside none;padding:0; margin:0 ; float:left; display:block; } 
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 26px; font:bold 15px/100% Arial, Helvetica, sans-serif; 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:999; }  
#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{ background:#3f3f3f; 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;} 
#cssmenu ul li.has-sub > a:hover{background:#00008B; border-color:#00008B;} 
#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; } 
#cssmenu ul li > ul{width:220px;} 
#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:10pt Arial, Helvetica, sans-serif; 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:#3e698c; background:-moz-linear-gradient(top,  #3e698c 0%, #30576e 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e698c), color-stop(100%,#30576e)); background:-webkit-linear-gradient(top,  #3e698c 0%,#30576e 100%); background:-o-linear-gradient(top, #3e698c 0%,#30576e 100%); background:-ms-linear-gradient(top, #3e698c 0%,#30576e 100%); background:linear-gradient(top,  #3e698c 0%,#30576e 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e698c', endColorstr='#30576e',GradientType=0 ); } 
#cssmenu{border-color:#1b313d;}   
#cssmenu > ul > li > a{border-right:1px solid #1b313d; color:#fff;}  
#cssmenu > ul > li > a:after{border-color:#000;}                        
#cssmenu > ul > li > a:hover{background:#00008B;}

[William Bruno 1501]

qual versão do ie ?

 

se não me engano, até a versão 7, o ie não reconhece o seletor >

[Marcos Coelho2 2]

você precisa ter uma solução para as versões anteriores dos navegadores e os navegadores menos famosos, já que a maioria não suporta o css3

[Claiton B G 0]

Como você não postou o html do menu eu tive que criar um para testar e consegui fazer funcionar o IE 8.

 

Assim como o William Bruno, tambem acho que versões anteriores do IE não reconhecem o seletor de elemento filho ">".

 

Mas vamos por partes: Quanto a "divisão final" na verdade ela não existe. O que parece uma divisão final é o que sobrou do #cssmenu (no meu caso é um div) que esta definido com 1000px de largura. Assim, mesmo que o seu menu tenha apenas 2 ou 1 elementos uma eles não vão preencher todo o #cssmenu e uma parate dele vai sobrar.

Para contornar o problema eu removi a largura dele e modifiquei o display para inline-block:

 

#cssmenu{ height:37px; padding:0; display:inline-block; ...

 

Com isso ele fica alinhado para esquerda, então para centralizar eu defini o alinhamento do elemento onde esta o menu (body, no meu caso) como centralizado:

 

body {text-align: center;}

 

Percebi que no meu caso as bordas que separam um elemento (item do menu) do outro estavam passando um pouco para baixo da faixa do menu dando um aspecto extranho então aumentei a altura do #cssmenu para 38px.

 

Um outro problema é que todos elementos (itens) do menu tem uma segunda borda a direita adicionada com a linha abaixo:

 

#cssmenu > ul > li > a:after{ content:''; position:absolute; border-right:1px solid ...

 

Não vejo utilidade nisso e recomendo remover essa segunda borda, na minha opnião o menu ficou até mais bonito.

 

Essa(s) borda(s) separa(m) um elemento do outro, mas o ultimo elemento não precisa desta borda já que e não tem nenhum elemento após ele. Assim, eu removi a borda do ultimo elemento e aredondei os cantos do mesmo com o css Abaixo:

 

#cssmenu > ul > li:last-child > a:after { content: clear; display: none;}

#cssmenu > ul > li:last-child > a{border-right:none;}

#cssmenu > ul > li:last-child > a{border-radius:0px 5px 5px 0px;}

 

 

 

Como eu disse, funcionou no IE8 com o HTML que eu criei, já que você não postou o seu. Lembrando que isso só funciona com navegadores com suporte a CSS3, Como o marcos falou. Abaixo as alterações que eu fiz::

 

HTML:

 

<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "pt-br" xml:lang = "pt-br" dir = "ltr">
<head>
<meta http-equiv = "Content-Type" content = "application/xhtml+xml;charset=utf-8" />

<title>  </title>

<link rel = "stylesheet" type = "text/css" href = "estilo.css" media = "screen" />
<script type = "text/javascript" charset = "utf-8" src = "javascript.js"></script>
</head>
<body>
<div id = "cssmenu">
	<ul>
		<li><a href = "#"> Elemento 1 </a></li>
		<li><a href = "#"> Elemento 2 </a></li>
		<li><a href = "#"> Elemento 3 </a></li>
		<li class = "has-sub"><a href = "#"> Elemento 4 </a>
			<ul>
				<li><a href = "#"> Elemento 4.1 </a></li>
				<li><a href = "#"> Elemento 4.2 </a></li>
				<li><a href = "#"> Elemento 4.3 </a></li>
				<li><a href = "#"> Elemento 4.4 </a></li>
				<li><a href = "#"> Elemento 4.5 </a></li>
			</ul>
		</li>
		<li><a href = "#"> Elemento 5 </a></li>
		<li><a href = "#"> Elemento 6 </a></li>
	</ul>
</div>
</body>
</html>

 

CSS:

 

body {text-align: center;}
#cssmenu{ height:38px; padding:0; display:inline-block; margin:0 auto; border:1px solid; border-radius:5px;} 
#cssmenu > ul {list-style:inside none; padding:0; margin:0 ; } 
#cssmenu > ul > li {list-style:inside none;padding:0; margin:0 ; float:left; display:block; } 
#cssmenu > ul > li > a{ outline:none; display:block; position:relative; padding:12px 26px; font:bold 15px/100% Arial, Helvetica, sans-serif; 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:999; } 
/* Alterações */
#cssmenu > ul > li:last-child  > a:after { content: clear; display: none;} 
#cssmenu > ul > li:last-child  > a{border-right:none;}
#cssmenu > ul > li:last-child  > a{border-radius:0px 5px 5px 0px;}
/* Fim alterações */
#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{ background:#3f3f3f; 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;} 
#cssmenu ul li.has-sub > a:hover{background:#00008B; border-color:#00008B;} 
#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; } 
#cssmenu ul li > ul{width:220px;} 
#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:10pt Arial, Helvetica, sans-serif; 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:#3e698c; background:-moz-linear-gradient(top,  #3e698c 0%, #30576e 100%); background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#3e698c), color-stop(100%,#30576e)); background:-webkit-linear-gradient(top,  #3e698c 0%,#30576e 100%); background:-o-linear-gradient(top, #3e698c 0%,#30576e 100%); background:-ms-linear-gradient(top, #3e698c 0%,#30576e 100%); background:linear-gradient(top,  #3e698c 0%,#30576e 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#3e698c', endColorstr='#30576e',GradientType=0 ); } 
#cssmenu{border-color:#1b313d;}   
#cssmenu > ul > li > a{border-right:1px solid #1b313d; color:#fff;}  
#cssmenu > ul > li > a:after{border-color:#000;}                    	
#cssmenu > ul > li > a:hover{background:#00008B;}