Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Gilmar Magi

Drop Down com <ul><li> + CSS

Por , em Desenvolvimento frontend

Recommended Posts

Gilmar Magi    0

Gilmar Magi
Postado

Olá para todos! Este é meu primeiro post aqui. Espero que possam me ajudar! =)

 

Bom, fui encarregado de adaptar a intranet da empresa com os padroes WS.

 

Os problemas logo surgiram... principalmente quando estou visualizando o resultado no IE6 ou 7.

 

1) O primeiro problema é com relação a um menu Drop Down. Peguei um menu na vertical usando ul li pronto, para adaptar para um dropdown. Quando terminei e comecei a testar, ele funcionou no Firefox e IE7, mas no IE6 ele simplesmente não funciona. (Abaixo disponibilizo o código).

 

CÓDIGO HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"><html ><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Titulo</title></head><body id="Corpo"><div id="Topo">		<h1><span>Tray Commerce</span></h1>		<div id="navapoio"> 		  <div id="navegacao"> 			<ul id="nav">			  <li><a href="#"><span>Link A</span></a> 				<ul>				  <li><a href="#">Sub Link 1 </a></li>				  <li><a href="#">Sub Link 2 </a></li>				  <li><a href="#">Sub Link 3 </a></li>				  <li><a href="#">Sub Link 4 </a></li>				  <li><a href="#">Sub Link 5 </a></li>				  <li><a href="#">Sub Link 6 </a></li>				</ul>			  </li>			  <li><a href="#"><span>Link B</span></a>				<ul>				  <li><a href="#">Sub Link 7 </a></li>				  <li><a href="#">Sub Link 8 </a></li>				  <li><a href="#">Sub Link 9 </a></li>				  <li><a href="#">Sub Link10</a></li>				</ul>			  </li>			</ul>		  </div>		</div></div></body></html>

CSS

* { margin:0; padding:0;font-size: 1.0em; }body {	font-family: Verdana;	font-size: 0.7em;	color: #333;	background-color: #FFF; }#Tudo {	text-align:left;	background-image: url(../imgs/bg_tudo_2.gif);	background-repeat: repeat-x;}#Topo {	height:129px;	background: url(../imgs/bg_topo.gif) no-repeat left top;}#Topo h1 {	height:38px;	background-image: url(../imgs/logo.png);	width: 108px;	position: absolute;	z-index: 2;	left: 30px;	top: 10px;}#Topo h1 span {	display: none;}#navapoio {	position: absolute;	height: 24px;	top: 32px;	z-index: 1;	padding-left: 130px;}#navegacao ul li {	position:relative;	float: left;	width: 11%;	list-style:none;	font-size: 1.0em;}#navegacao ul li ul li {	position:relative;	float: none;	height: 23px;}	#navegacao ul li a {	display: block;	text-decoration: none;	color: #000;	padding: 5px;	padding-right: 6px;	padding-left: 6px;	}#navegacao ul li a:hover {	background: url(../imgs/img_menu_hover.gif) repeat-x;	color: #1790CD;	border: 1px solid  #B3C7E7;	border-top-width: 0px;	border-bottom-width: 0px;	padding: 5px;}ul ul {	display:none;	background:url(../imgs/bg_menu_nivel2.gif) repeat-x;	top: 23px;	opacity:0.92;	-moz-opacity: 0.92;	position: absolute;}#navegacao ul li:hover ul,#navegacao ul li li:hover ul,#navegacao ul li.over ul,#navegacao ul li li.over ul {	display: block;	border: 1px solid #B3C7E7;	background: url(../imgs/bg_menu_nivel2_b.gif) repeat-x bottom;	background-color: #FFF;	width:151px;}li ul li a {	height: 20px;	width: 140px;	padding-left: 5px;	background-image: none;}ul li ul li a:hover {	color: #1790CD;	padding-top: 2px;	padding-left: 5px;}ul li ul li a {	text-decoration: none;	color: #000;	padding-top: 2px;	padding-left: 5px;}<!-- [if IE 6]>#navegacao ul li {position:relative;	float: left; width: 11%;}<![endif]--><!-- [if IE 6]>* html #navegacao ul li { float: left; height: 1%; }<![endif]--><!-- [if IE 6]>* html #navegacao ul li a { height: 1%; }<![endif]-->

Se testar no IE6 cerá que não funciona. Já no IE7 e Firefox, não há problemas....

 

alguem poderia me ajudar? alguem sabe pq nao funciona no IE6?

 

Abraço!

 

Gilmar

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito