Jump to content


Itabora

Member Since 03/07/2007
Offline Last Active 15/12/2009, 16:28
-----

Topics I've Started

Submenu Em Css, Com Dois Níveis

09/12/2009, 14:34

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;
}

IPB Skin By Virteq