submenu do menu abre por baixo das camadas IE

[pcdesign 0]

estou com um problema com o menu que peguei aqui no forum desculpa não lembro de quem,mas é o seguinte no Internet explorer acredito que esta dando o conflito do css da pagina com o css do menu.e não consigo fazer o submenu aprecer sobre o conteudo do site.desde ja muito obrigado.

[dream1702 0]

Então..Esse menu é o que?SWF ou foi feito no fireworks, dreamweaver etc...Não tem nenhum link pra gente ver? Se tiver vai ficar mais facil te ajudar.Se não tenta explicar um pouco melhor.Falow

[pcdesign 0]

css mas este problema ja consegui resolver.

 

agora estou com um outro problema com canto arredondado:

no firefox beleza ma no IE Há meu Deus!!!!!!!!!!!!!!!!!!

 

eu fiz isso <span class=leftmenu></span><li>Menu</li><span class="rightmenu"></span>

 

menu.css

 

#menuh{

position:relative;

font-size: 70%;

height:30px;

z-index:1000;

 

}

 

#menuv{

position: relative;

margin: 0px;

padding: 0px;

border-bottom: 1px solid #cccccc;

font-size:80%;

z-index:1000;

 

}

 

#menuv h3{

padding: 10px 0px 2px 10px;

}

 

ul.menubar

{

margin: 0;

padding: 0;

background-color: #FFFFFF; /* IE6 Bug */

font-size: 100%;

position:relative;

z-index: 1000;

 

 

}

 

ul.menubar .menuvertical

{

margin: 2px 0px 0px 0px;

padding: 1px;

list-style: none;

background:url(../img/bluegray_columns_bc.gif);

float:left;

width: 100px;

height:20px;

position:relative;

z-index: 1000;

display:marker;

 

 

}

.leftmenu

{

margin: 2px 0px 0px 0px;

padding: 1px;

list-style: none;

float:left;

position:relative;

z-index: 1001;

background:url(../img/bluegray_columns_bl.gif) no-repeat left;

height:20px;

width:10px;

 

}

 

.rightmenu

{

margin: 2px 10px 0px 0px;

padding: 1px;

list-style: none;

float:left;

position:relative;

z-index:1001;

background:url(../img/bluegray_columns_br.gif) no-repeat right;

height:20px;

width:10px;

 

}

 

ul.menubar ul.menu

{

display: none;

position: absolute;

margin: 0px;

z-index: 1000;

background: #FFFFFF;

}

 

ul.menubar a

{

margin:0px;

display:block;

text-decoration: none;

color: #777;

padding: 4px 3px 3px 5px;

z-index: 1000;

 

}

 

 

ul.menu,

ul.menu ul

{

margin: 0;

padding: 0;

border-bottom: 1px solid #ccc;

width: 150px; /* Width of Menu Items */

background-color: #FFFFFF; /* IE6 Bug */

position:relative;

z-index: 1000;

}

 

ul.menu li

{

position: relative;

list-style: none;

border: 0px;

z-index: 1000;

}

 

ul.menu li hr

{

width: 148px;

padding: 0px;

margin: 0px;

position:relative;

z-index: 1000;

}

 

ul.menu li a

{

display: block;

text-decoration: none;

border: 1px solid #ccc;

border-bottom: 0px;

color: #777;

padding: 5px 10px 5px 5px;

position:relative;

z-index: 1000;

}

 

/* Fix IE. Hide from IE Mac \*/

* html ul.menu li { float: left; height: 1%; }

* html ul.menu li a { height: 1%; }

/* End */

 

ul.menu ul

{

position: absolute;

display: none;

left: 149px; /* Set 1px less than menu width */

top: 0px;

z-index: 1000;

}

 

ul.menu li.submenu ul { display: none; z-index: 0;} /* Hide sub-menus initially */

 

ul.menu li.submenu { background: transparent url(../img/stub_arrow_right.gif) right center no-repeat; z-index: 0; }

 

ul.menu li a:hover { color: #E2144A; z-index:1000;}

menu.htm

 

<script type="text/javascript">

//<![CDATA[

function vertical() {

 

var navItems = document.getElementById("nav").getElementsByTagName("li");

 

for (var i=0; i< navItems.length; i++) {

if(navItems.className == "submenu") {

navItems.onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#f9f9f9";}

navItems.onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#FFFFFF";}

}

}

 

}

 

function horizontal() {

 

var navItems = document.getElementById("barra").getElementsByTagName("li");

 

for (var i=0; i< navItems.length; i++) {

if((navItems.className == "menuvertical") || (navItems.className == "submenu"))

{

if(navItems.getElementsByTagName('ul')[0] != null)

{

navItems.onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#f9f9f9";}

navItems.onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#FFFFFF";}

}

}

}

 

}

//]]>

</script>

 

<div id="menuh">

<ul id="barra" class="menubar">

<span class="leftmenu"></span><li class="menuvertical"><a href="#">Menu 1</a>

<ul id="nav2" class="menu">

 

<li><a href="#">Home</a></li>

 

<li class="submenu"><a href="#">About</a>

<ul>

<li><a href="#">History</a></li>

<li><a href="#">Team</a></li>

<li><a href="#">Offices</a></li>

</ul>

</li>

 

<li class="submenu"><a href="#">Services</a>

<ul>

<li><a href="#">Web Design</a></li>

<li><a href="#">Internet Marketing</a></li>

<li class="submenu"><a href="#">Hosting</a>

<ul>

<li><a href="#">Dedicated</a></li>

 

<li class="submenu"><a href="#">Virtual</a>

<ul>

<li><a href="#">United Kingdom</a></li>

<li><a href="#">France</a></li>

<li><a href="#">USA</a></li>

 

<li><a href="#">Australia</a></li>

</ul>

</li>

<li><a href="#">Shared</a></li>

<li><a href="#">Managed</a></li>

</ul>

</li>

<li><a href="#">Domain Names</a></li>

<li><a href="#">Broadband</a></li>

</ul>

</li>

<li class="submenu"><a href="#">Contact Us</a>

<ul>

<li><a href="#">United Kingdom</a></li>

<li><a href="#">France</a></li>

<li><a href="#">USA</a></li>

 

<li><a href="#">Australia</a></li>

</ul>

</li>

</ul>

</li><span class="rightmenu"></span>

 

<span class="leftmenu"></span><li class="menuvertical"><a href="#">Menu 2</a></li><span class="rightmenu"></span>

<span class="leftmenu"></span><li class="menuvertical"><a href="#">Menu 3</a>

<ul id="nav3" class="menu">

<li><a href="#">Home</a></li>

 

<li class="submenu"><a href="#">About</a>

<ul>

<li><a href="#">History</a></li>

<li><a href="#">Team</a></li>

<li><a href="#">Offices</a></li>

</ul>

</li>

 

<li class="submenu"><a href="#">Services</a>

<ul>

<li><a href="#">Web Design</a></li>

<li><a href="#">Internet Marketing</a></li>

<li class="submenu"><a href="#">Hosting</a>

<ul>

<li><a href="#">Dedicated</a></li>

 

<li class="submenu"><a href="#">Virtual</a>

<ul>

<li><a href="#">United Kingdom</a></li>

<li><a href="#">France</a></li>

<li><a href="#">USA</a></li>

 

<li><a href="#">Australia</a></li>

</ul>

</li>

<li><a href="#">Shared</a></li>

<li><a href="#">Managed</a></li>

</ul>

</li>

<li><a href="#">Domain Names</a></li>

<li><a href="#">Broadband</a></li>

</ul>

</li>

<li class="submenu"><a href="#">Contact Us</a>

<ul>

<li><a href="#">United Kingdom</a></li>

<li><a href="#">France</a></li>

<li><a href="#">USA</a></li>

 

<li><a href="#">Australia</a></li>

</ul>

</li>

</ul>

</li><span class="rightmenu"></span>

</ul>

</div>

desde ja muito obrigado

[Guilherme Rambo 4]

Teria um link pra nós vermos o problema?[]'s

[pcdesign 0]

não!mas o prolema é o seguinte é que em vez de flutuar a esquerdaque pra baixo como se não hovesse espaço para o span com as imagens de canto arredondado.faz de conta que esta apresentação é o menu e que menu1, 2 e 3 são o <li> e os cochetes são os spa comoscantos arredondados:[ menu1 ] [ menu2 ] [ menu3 ] no firofox beleza.mas no IE fica assim bagunçado apenas o primeiro span fica na ordem e os outros quebram pra baixoe os <li> ficam todos juntos:acho que preciso de hack para o IE.[ menu1menu2menu3 ] [ ] [ ]

[hunternh 2]

Esse é o menu que eu postei aqui: http://forum.imasters.com.br/index.php?showtopic=216008

 

O link dele funcionando: http://hunternh.110mb.com/menu/horizontal_e_vetical.html

[pcdesign 0]

agora estou falando com a pessoa certa.hunternh este escript que passei no forum é justamente o seu, mas só passei o que se refere ao menu horizontal, pois o vertical não tem nenhum problema.O pro é que adicioei uns span com imagens para deixar os cantos arredondados e esta funcionando beleza no Firefoxmas no IE as imagens de canto arredondado deslizam para baixo.logo acima simulei o que esta havendo.

[hunternh 2]

Fiz algumas alterações e repare que é no estilo "ul.menubar .menuvertical" que você vai colocar uma imagem de fundo no menu vertical, eu usei uma imagem de 146x25 pixels, faz um teste e diz se é o que você precisa.

 

Aqui o menu vertical com imagens: http://hunternh.110mb.com/menu/vetical.html

 

<!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" xml:lang="pt-br" lang="pt-br"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Menu horizontal</title><script type="text/javascript">//<![CDATA[function horizontal() {	var navItems = document.getElementById("barra").getElementsByTagName("li");		for (var i=0; i< navItems.length; i++) {		if((navItems[i].className == "menuvertical") || (navItems[i].className == "submenu"))		{			if(navItems[i].getElementsByTagName('ul')[0] != null)			{				navItems[i].onmouseover=function() {this.getElementsByTagName('ul')[0].style.display="block";this.style.backgroundColor = "#f9f9f9";}				navItems[i].onmouseout=function() {this.getElementsByTagName('ul')[0].style.display="none";this.style.backgroundColor = "#FFFFFF";}			}		}	}}//]]></script><style type="text/css">body { font: normal 62.5% verdana; }ul.menubar{	margin: 0;	padding: 0;	background-color: #FFFFFF; /* IE6 Bug */	font-size: 100%;	}ul.menubar .menuvertical{	margin: 0px;	  padding: 0px;	  width: 146px;	  height: 25px;	  list-style: none;	  background: transparent url(menu.jpg) right center no-repeat;;	float:left;}ul.menubar a{	padding: 0px 0px 0px 10px;	display:block;	text-decoration: none;	color: #777;	line-height: 25px}/* Fix IE. Hide from IE Mac \*/* ul.menubar .menuvertical a { height: 1%; }/* End */ul.menubar ul.menu{	display: none;	position: absolute;	margin: 0px;}ul.menubar li a:hover { color: #E2144A; }ul.menu,ul.menu ul{	margin: 0;	padding: 0;	border-bottom: 1px solid #ccc;	width: 146px; /* Width of Menu Items */	background-color: #FFFFFF; /* IE6 Bug */}ul.menu li{	position: relative;	list-style: none;	border: 0px;}ul.menu li a{	display: block;	text-decoration: none;	border: 1px solid #ccc;	border-bottom: 0px;	color: #777;}/* Fix IE. Hide from IE Mac \*/* html ul.menu li { float: left; height: 1%; }* ul.menu li a { height: 1%; }/* End */ul.menu ul{	position: absolute;	display: none;	left: 145px; /* Set 1px less than menu width */	top: 0px;}ul.menu li.submenu ul { display: none; } /* Hide sub-menus initially */ul.menu li.submenu { background: transparent url(arrow.gif) right center no-repeat; }</style></head><body onload="horizontal();"><ul id="barra" class="menubar">	<li class="menuvertical"><a href="#">Menu 1</a>		<ul id="nav2" class="menu">		  <li><a href="#">Home</a></li>				  <li class="submenu"><a href="#">About</a> 			<ul>			  <li><a href="#">History</a></li>			  <li><a href="#">Team</a></li>			  <li><a href="#">Offices</a></li>			</ul>		  </li>				  <li class="submenu"><a href="#">Services</a> 			<ul>			  <li><a href="#">Web Design</a></li>			  <li><a href="#">Internet Marketing</a></li>			  <li class="submenu"><a href="#">Hosting</a> 				<ul>				  <li><a href="#">Dedicated</a></li>						  <li class="submenu"><a href="#">Virtual</a>					<ul>					  <li><a href="#">United Kingdom</a></li>					  <li><a href="#">France</a></li>					  <li><a href="#">USA</a></li>									  <li><a href="#">Australia</a></li>					</ul>				  </li>				  <li><a href="#">Shared</a></li>				  <li><a href="#">Managed</a></li>				</ul>			  </li>			  <li><a href="#">Domain Names</a></li>			  <li><a href="#">Broadband</a></li>					</ul>		  </li>		  <li class="submenu"><a href="#">Contact Us</a> 			<ul>			  <li><a href="#">United Kingdom</a></li>			  <li><a href="#">France</a></li>			  <li><a href="#">USA</a></li>					  <li><a href="#">Australia</a></li>			</ul>		  </li>		</ul>	</li>	<li class="menuvertical"><a href="#">Menu 2</a></li>	<li class="menuvertical"><a href="#">Menu 3</a>		<ul id="nav3" class="menu">		  <li><a href="#">Home</a></li>				  <li class="submenu"><a href="#">About</a> 			<ul>			  <li><a href="#">History</a></li>			  <li><a href="#">Team</a></li>			  <li><a href="#">Offices</a></li>			</ul>		  </li>				  <li class="submenu"><a href="#">Services</a> 			<ul>			  <li><a href="#">Web Design</a></li>			  <li><a href="#">Internet Marketing</a></li>			  <li class="submenu"><a href="#">Hosting</a> 				<ul>				  <li><a href="#">Dedicated</a></li>						  <li class="submenu"><a href="#">Virtual</a>					<ul>					  <li><a href="#">United Kingdom</a></li>					  <li><a href="#">France</a></li>					  <li><a href="#">USA</a></li>									  <li><a href="#">Australia</a></li>					</ul>				  </li>				  <li><a href="#">Shared</a></li>				  <li><a href="#">Managed</a></li>				</ul>			  </li>			  <li><a href="#">Domain Names</a></li>			  <li><a href="#">Broadband</a></li>					</ul>		  </li>		  <li class="submenu"><a href="#">Contact Us</a> 			<ul>			  <li><a href="#">United Kingdom</a></li>			  <li><a href="#">France</a></li>			  <li><a href="#">USA</a></li>					  <li><a href="#">Australia</a></li>			</ul>		  </li>		</ul>	</li></ul>	</body></html>

[pcdesign 0]

Valeu gente boa.Mas porque num pensei nisso antes, estava utilizando tres imagenscomo num daquele feitos automaticamente por programas de menu.<span>img_esq</span><li>menu</><span>img_dir</span>com mais uma imagen de funo no simulando as bordas.mas testa forma que você indica!!! Eu vou chorar por ter perdiodo tanto tempo.Valeu beleza mesmo.