6 replies to this topic

[Itabora]

Boa tarde.

Estou fazendo um menu horizontal, com dois níveis de submenus, que funciona perfeitamente no Firefox; mas não funciona no IE6, nem no 7 (no 8 eu não cheguei a testar).

Se alguém puder me ajudar, agradeço muito.

Seguem o HTML e o CSS que eu fiz (disponibilizei aqui também - no menu Produtos: www.rodrigoitaborahy.com.br/submenu/):

<div id="menuPosition" class="menu-hv">
						<ul>
							<li><a href="#">Quem somos</a>
								<ul>
									<li><a href="historia.htm">História</a></li>
									<li><a href="perfil.htm">Perfil Corporativo</a></li>
									<li><a href="profile.htm">Profile</a></li>
									<li><a href="mvv.htm">MVV</a></li>
								</ul>
							</li>
							<li><a href="#">Produtos</a>
								<ul>
									<li><a href="prod_karl_storz.htm">Karl Storz</a>
										<ul>
											<li><a href="#">Produto 1</a></li>
											<li><a href="#">Produto 2</a></li>
											<li><a href="#">Produto 3</a></li>
										</ul>
									</li>
									<li><a href="prod_storz_medical.htm">Storz Medical</a>
										<ul class="subsub1">
											<li><a href="#">Produto 1</a></li>
											<li><a href="#">Produto 2</a></li>
											<li><a href="#">Produto 3</a></li>
										</ul>
									</li>
									<li><a href="prod_mtp.htm">MTP</a></li>
									<li><a href="#">Medisafe</a>
										<ul class="subsub3">
											<li><a href="#">Produto 1</a></li>
											<li><a href="#">Produto 2</a></li>
											<li><a href="#">Produto 3</a></li>
										</ul>
									</li>
									<li><a href="prod_scican.htm">Scican</a>
										<ul class="subsub4">
											<li><a href="#">Produto 1</a></li>
											<li><a href="#">Produto 2</a></li>
											<li><a href="#">Produto 3</a></li>
										</ul>
									</li>
									<li><a href="prod_intuitive.htm">Intuitive</a>
										<ul class="subsub5">
											<li><a href="#">Produto 1</a></li>
											<li><a href="#">Produto 2</a></li>
											<li><a href="#">Produto 3</a></li>
										</ul>
									</li>
									<li><a href="prod_swann_morton.htm">Swann Morton</a></li>
									<li><a href="prod_edap.htm">Edap</a></li>
									<li><a href="prod_trilux.htm">Trilux</a></li>
								</ul>
							</li>
							<li><a href="assinstencia.htm" title="menu Assistência Técnica">A. Técnica</a>
								<ul>
									<li><a href="dicas.htm">Dicas</a></li>
									<li><a href="embalagem.htm">Embalagem para envio</a></li>
									<li><a href="insuflador.htm">Insuflador</a></li>
									<li><a href="fontesdeluz.htm">Fontes de luz</a></li>
									<li><a href="endoscopio.htm">Endoscópio</a></li>
								</ul>
							</li>
							<li><a href="eventos.htm">Eventos</a></li>
							<li><a href="#">Profissionais de Saúde</a>
								<ul>
									<li><a href="enfermeiros.htm">Enfermeiros / Instrumentadores</a></li>
									<li><a href="medicos.htm">Médicos</a></li>
								</ul>
							</li>
							<li><a href="contato.htm">Contato</a></li>
							<li><a href="cadastre-se.htm">Cadastre-se</a></li>
						</ul>
					</div>
					<!-- menuPosition -->

layout.css:

div#menuPosition {
	width: 870px;
	height: 64px;
	left: 110px;
	position: relative;
	z-index: 2;
}

.menu-hv * { 
	margin: 0; 
	padding: 0; 
	font-size:16px; 
	font-weight:bold;
}

.menu-hv a { 
	display: block; 
}

.menu-hv li { 
	list-style: none; 
	float: left; 
	height: 1%; 
}

.menu-hv li ul { 
	position: absolute; 
	visibility: hidden;
}

.menu-hv li ul li { 
	float: none; 
	white-space: nowrap; 
	display: inline; 
	/* o inline é pro IE */
}

.menu-hv li ul li ul { 
	position: absolute; 
	left: 100%; 
	top: 0; 
}

.menu-hv li:hover ul, .menu-hv li.over ul { 
	visibility: visible;
}

.menu-hv li:hover ul ul, .menu-hv li.over ul ul { 
	visibility: hidden;
}

.menu-hv ul ul li:hover ul, .menu-hv ul ul li.over ul { 
	visibility: visible;
}

.menu-hv { 
	margin: 0 0 0 0px; 
	height: 30px; 
}

.menu-hv a {
	text-decoration: none; 
	font-family: Trebuchet MS, Verdana, Arial, Helvetica, sans-serif;
	font-size: 16px;
	color: #767676;
	text-decoration: none;
	line-height: 34px;
	padding-left: 17px;
	padding-right: 14px; 
	line-height: 30px; 
}

.menu-hv a:hover { 
	background: #003366; 
	color: #fff;
}

.menu-hv ul li ul { 
	background: #ddd;
	filter: alpha(opacity=90); 
	filter: alpha(opacity='90'); /* IE */
	-moz-opacity: 0.9; /* Firefox */
	opacity: 0.9; /* Opera */
}

.menu-hv ul li ul ul.subsub1 {
	right: auto;
	top: 30px;
	background: #ddd;
}

.menu-hv ul li ul ul.subsub2 {
	right: auto;
	top: 60px;
}

.menu-hv ul li ul ul.subsub3 {
	right: auto;
	top: 90px;
}

.menu-hv ul li ul ul.subsub4 {
	right: auto;
	top: 120px;
}

.menu-hv ul li ul ul.subsub5 {
	right: auto;
	top: 150px;
}

Edição feita por: Victor Hugo Odo, 09/12/2009, 14:39.
Inserir bbcode.

[Victor Hugo Odo]

Olá Itabora,
Seja bem-vindo ao fórum.

Bom, acessei e percebi que de qualquer forma seu menu não funciona via teclado. Recomendo que por questões de Standards, SEO e Acessibilidade, siga o seguinte tutorial:

http://brunotorres.n...a-com-o-teclado

Bons ventos.

Edição feita por: Victor Hugo Odo, 09/12/2009, 14:45.

[Itabora]

Olá, Victor.

Obrigado pela rápida resposta. Mas acabo de ficar no mesmo problema (apesar de o menu já funcionar com o teclado). Não sei como fazer um "sub-submenu", que apareça ao lado de algum submenu que eu passe o mouse.

No código, eu alterei, colocando ul para fazer o "sub-submenu", mas não funciona direito (agora, nem no Firefox):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<title>Dropdown acessível via teclado</title>
<style type="text/css">
ul{ list-style:none; }
#menu li {
float:left;
position:relative;
}
#menu li ul {
 display:none;
 position:absolute;
 top:0;
 left:0;
 margin:1.5em 0 0 0;
 padding:0;
}
#menu li:hover ul { display:block; }
#menu li a{
	display:block;
	padding:.2em .5em;
	text-decoration:none;
	color:#154daf;
}
#menu li ul{
	background:#154daf;
}
#menu li ul a{
	color:#fff;
}
</style>
<script type="text/javascript">
	function enableSubMenus(){
		var lis = document.getElementsByTagName('li');
		for (var i = 0, li; li = lis[i]; i++){
	 var link = li.getElementsByTagName('a')[0];
	 if (link){
			link.onfocus = function(){
		 var ul = this.parentNode.getElementsByTagName('ul')[0];
		 if (ul)
		 ul.style.display = 'block';
			}
			var ul = link.parentNode.getElementsByTagName('ul')[0];
			if (ul){
		 var ullinks = ul.getElementsByTagName('a');
		 var ullinksqty = ullinks.length;
		 var lastItem = ullinks[ullinksqty - 1];
		 if (lastItem){
				lastItem.onblur = function(){
			 this.parentNode.parentNode.style.display = '';
				}
		 }
			}
	 }
		}
	}
	window.onload = enableSubMenus;
</script>
</head>
<body>
<ul id="menu"> 
	<li><a href="#inicio">Início</a></li> 
	<li><a href="#servicos">Serviços</a> 
		<ul> 
			<li><a href="#design">Design</a></li> 
			<li><a href="#prog">Programação</a>
				<ul>
					<li><a href="#prog">Prog. 1</a></li>
				</ul>
			</li>
		</ul> 
	</li>
</ul> 
</body>
</html>

Edição feita por: Victor Hugo Odo, 09/12/2009, 16:59.
Inserir bbcode.

[Thiago Retondar]

Basicamente você vai ter que trabalhar com float: left no UL...

NO Internet Explorer 6 não funciona devido a falta de JavaScript. Ele - http://www.rodrigoit...nu/js/script.js - não está online.

[Itabora]

Obrigado, Thiago.

Vou procurar algo com JS.

Abs.

[Kahor]

Dá uma olhada aqui: http://www.maujor.co...ddownmenu-a.php

Abraço

[Itabora]

Valeu, Kahor!
Agora consegui!

Abraço.