• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

Drone

Menu + Submenu

6 mensagens neste tópico

Boas, estou a estudar CSS agora mais aprofundado e preciso aqui d1 helpzito,

Tou a fazer um menu que tem um Sub menu, no FireFox funciona às mil maravilhas e com o iexplorer ta uma borrada total... ja andei aqui as voltas e nao consigo ate porque este codigo vi num tutorial que estive a ler, nao percebo se alguem me puder dar uma ajudinha agradecia :confused:

HTML:

<ul id="nav">
<li><a href="?pagina=horario" title="Horario">Horário</a></li>
<li><a href="?pagina=pagamentos" title="Historico de Pagamentos">Histórico de Pagamentos</a></li>
<li><a href="#" title="Envio de Mensagens">Envio de Mensagens</a>
	<ul>
		<li><a href="?pagina=cxentrada" title="Mensagens > Caixa de Entrada">Caixa de Entrada</a></li>
		<li><a href="?pagina=cxsaida" title="Mensagens > Caixa de Saida">Caixa de Saída</a></li>
	</ul>					</li>
<li><a href="#" title="Plano Curricular">Plano Curricular</a></li>
<li><a href="#" title="Procedimentos de Formacao">Procedimentos de Formação</a></li>
<li><a href="?pagina=perfil" title="Meu Perfil">Meu perfil</a></li>
<li><a href="?pagina=sair" title="Sair">Sair</a></li>
</ul>

CSS:

ul {
width: 200px;
padding: 0;
margin: 0;
font: 10px Verdana;
list-style: none;
width: 200px;
}

ul li { position:relative; }

ul li ul {
position: absolute;
left: 200px;
top: 0;
display: none;
}

ul li a {
border-left: 10px solid #006599;
border-right: 5px solid #fff5ee;
border-bottom: 1px solid #006599;
background-color: #E4F2F9;
color: #006599;
text-align: left;
text-decoration: none;
padding: 5px 5px 5px 10px;
display: block;
margin: 0px;
}

ul li ul {
border: 1px solid #006599;
}

ul li ul li a {
border-left: 10px solid #006599;
border-right: 5px solid #fff5ee;
border-bottom: 1px solid #006599;
background-color: #E4F2F9;
color: #006599;
text-align: left;
text-decoration: none;
padding: 5px 5px 5px 10px;
display: block;
margin: 0px;
}

ul li a:hover {
border-left: 10px solid #4497C2;
border-right: 5px solid #fff;
background-color: #F7FAFC;
color: #006599;
font-weight: bold;
}

li:hover ul, li.over ul { display: block; }

[table]

[td]internetexplorermd5.jpg[/td]

[td]firefoxgb7.jpg[/td]

[td]

Internet Explorer

[/td]

[td]

FireFox

[/td]

[/table]

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

nao tenho a certeza mas mete la estas duas cenas no fim do menu:


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

  acho que e isto... pelo o menos tenho um menu parecido ao teu e usei isso... se for isto e xamado os Hack's pelo o menos era o que dizia o site onde vi.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Sim eu tenho isso esquecime de colocar ali em cima! é estranho nao sei o que poderá ser o erro, é que o firefox funciona 100%

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

é estranho nao sei o que poderá ser o erro, é que o firefox funciona 100%

O erro é mesmo o ie. O ie não segue correctamente as regras css particularmente as regras de css2. Se não me engano é aqui que está o erro :confused:

Cumps 8)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Falta ai um pouco de código javascript...

Estive a ler um tutorial, e era isso que apontava, no IE necessita de javascript!

cps

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora