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

_bernardo_

Menu....

3 mensagens neste tópico

Boas....

To aki kom um problema num menu css...

Ele ta a funcinar bem no mozilla mas no IE nao funciona bem.... o codigo é este:...

<html>
<head>
<style type="text/css">

/* common styling */
.menu {font-family: arial, sans-serif; width:750px; position:relative; margin:0; font-size:11px; margin:2px 0 100px 0; z-index:100;}
.menu ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#000;width:104px; height:20px; text-align:center; color:#fff; border:1px solid #fff; background:#AFC5E0; line-height:20px; font-size:11px; overflow:hidden;}
.menu ul {padding:0; margin:0;list-style-type: none; }
.menu ul li {float:left; margin-right:1px; position:relative;}
.menu ul li ul {display: none;}

/* specific to non IE browsers */
.menu ul li:hover a {color:#fff; background:#36f;}
.menu ul li:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li:hover ul li a.hide {background:#AFC5E0; color:#fff;}
.menu ul li:hover ul li:hover a.hide {background:#6fc; color:#000;}
.menu ul li:hover ul li ul {display: none;}
.menu ul li:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li:hover ul li a:hover {background:#36f; color:#000;}
.menu ul li:hover ul li:hover ul {display:block; position:absolute; left:105px; top:0;}
.menu ul li:hover ul li:hover ul.left {left:-105px;}

<!--[if lte IE 6]>

.menu ul li a.hide, .menu ul li a:visited.hide {display:none;}
.menu ul li a:hover ul li a.hide {display:none;}

.menu ul li a:hover {color:#fff; background:#36f;}
.menu ul li a:hover ul {display:block; position:absolute; top:21px; left:0; width:105px;}
.menu ul li a:hover ul li a.sub {background:#AFC5E0; color:#fff;}
.menu ul li a:hover ul li a {display:block; background:#ddd; color:#000;}
.menu ul li a:hover ul li a ul {visibility:hidden;}
.menu ul li a:hover ul li a:hover {background:#6fc; color:#000;}
.menu ul li a:hover ul li a:hover ul {visibility:visible; position:absolute; left:105px; top:0; color:#000;}
.menu ul li a:hover ul li a:hover ul.left {left:-105px;}

<![endif]-->

</style>
</head>

<body>

<div class="menu">

<ul>

<li><a class="hide" href="index.html">EMPRESA</a>

<!--[if lte IE 6]>
<a href="index.html">MENUS
<table><tr><td>
<![endif]-->

<ul>
<li><a href="spies.html">Apresentação</a></li>
<li><a href="vertical.html">Historial</a></li>
<li><a href="expand.html">Missão</a></li>
<li><a href="enlarge.html">Instalações</a></li>


</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../layouts/index.html">PRODUTOS</a>

<!--[if lte IE 6]>
<a href="../layouts/index.html">LAYOUTS
<table><tr><td>
<![endif]-->

<ul>
<li><a href="../layouts/bodyfix.html">Papel</a></li>
<li><a href="../layouts/body2.html">Audiovisual</a></li>
<li><a href="../layouts/body4.html">Informática</a></li>
<li><a href="../layouts/body5.html">Consumiveis</a></li>
<li><a href="../layouts/body5.html">Mobiliário</a></li>
<li><a href="../layouts/body5.html">Máquinas</a></li>
<li><a href="../layouts/body5.html">Escritório</a></li>
<li><a href="../layouts/body5.html">Encadernação</a></li>
<li><a href="../layouts/body5.html">Escrita</a></li>
<li><a href="../layouts/body5.html">Embalagem</a></li>
<li><a href="../layouts/body5.html">Ensino</a></li>
<li><a href="../layouts/body5.html">Pastas e Dossiers</a></li>
<li><a href="../layouts/body5.html">Limpeza</a></li>

</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

<li><a class="hide" href="../boxes/index.html">CONTACTOS</a>

<!--[if lte IE 6]>
<a href="../boxes/index.html">BOXES
<table><tr><td>
<![endif]-->

<ul>

<li><a href="spies.html">Contactos</a></li>
<li><a href="vertical.html">Localização</a></li>
<li><a href="expand.html">Questões</a></li>

</ul>

<!--[if lte IE 6]>
</td></tr></table>
</a>
<![endif]-->

</li>

</ul>

</div>
</body>
</html>

Se alguem me puder ajudar ....

Fikem bem....

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

O IE6 não suporta a propriedade CSS :hover em itens que não sejam links (por exemplo, em LIs não funciona), terás de usar javascript para corrigir esse problema, aconselho a veres aqui http://alistapart.com/articles/dropdowns/ (e a pesquisares no google por suckerfish dropdowns porque penso que possa haver um problema no IE7 e pesquisando deves encontrar a solução)

:P

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

sem js, isto foi o melhor que consegui fazer... funciona no ff, opera e ie6, mas está-me a acontecer uma coisa estranha no ie que é, às vezes, o dropdown não desaparecer e, a seguir, já desaparecer bem, mas pode ser um problema com o meu ie... outra coisa que me acontece é que se puser padding para centrar as palavras na vertical, no ie deixa de funcionar...

<HTML>
<HEAD>
<TITLE>Untitled Document</TITLE>
<style type="text/css">
#menu {
  font-family: arial, sans-serif;
  text-align:center;
  list-style-type:none;
  margin:0;
  padding:0;
}
#menu li {
  float:left;
  padding:0;
  margin:0;
  position:relative;
  width:106px;
  height:20px;
  z-index:100;
  border: 1px solid #fff;
}
#menu li a, #menu li a:visited {
  text-decoration:none;
  border: 1px solid #fff;
}
#menu li:hover, #menu li a:hover {
  border: 1px solid #fff;
}
#menu li dl {
  position:absolute;
  border: 1px solid #fff;
  width:106px;
  top:0;
  left:0;
}
#menu li:hover dl, #menu li a:hover dl {
  padding:0;
  border: 1px solid #fff;
}
#menu li dd {
  display:none;
  border: 1px solid #fff;
}
#menu li:hover dd, #menu li a:hover dd {
  display:block;
  border: 1px solid #fff;
}
#menu table {
  padding:0;
  font-size:11px;
}
#menu dl {
  width: 104px;
  height: 20px;
  margin: 0;
  padding: 0;
  border: 1px solid #fff;
  background: #AFC5E0;
  text-align:center;
}
#menu dt {
  margin:0;
  border: 1px solid #fff;
  padding:0;
  font-size: 11px;
  background: #AFC5E0;
  color: #fff;
  width:106px;
  height: 21px;
}
#menu dt a:hover {
  background:#3366ff;
  border: 1px solid #fff;
  width:104px;
  height: 20px;
}
.popdown dt a, .popdown dt a:visited {
  display:block;
  color:#444444;
  width:104px;
  height: 20px;
  border: 1px solid #fff;
}
#menu dd {
  margin:0;
  padding:0;
  color: #fff;
  font-size: 11px;
  background: #AFC5E0;
  text-align:center;
  width:104px;
  height:20px;
  border: 1px solid #fff;
}
.popdown dd a, .popdown dd a:visited {
  color:#fff;
  text-decoration:none;
  display:block;
  background: #AFC5E0;
  width:104px;
  height: 20px;
}
.popdown dd a:hover {
  display: block;
  border: 1px solid #fff;
  background:#3366ff;
  color:#99ccff;
  width:104px;
  height: 20px;
}
</style>
</HEAD>
<BODY>
<ul id="menu">
  <li>
    <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
    <dl class="popdown">
      <dt class="one"><a href=#>EMPRESA</a></dt>
      <dd><a href="spies.html">Apresentação</a></dd>
      <dd><a href="vertical.html">Historial</a></dd>
      <dd><a href="expand.html">Missão</a></dd>
      <dd><a href="enlarge.html">Instalações</a></dd>
    </dl>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>
  <li>
    <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
    <dl class="popdown">
      <dt class="two"><a href=#>PRODUTOS</a></dt>
      <dd><a href="../layouts/bodyfix.html">Papel</a></dd>
      <dd><a href="../layouts/body2.html">Audiovisual</a></dd>
      <dd><a href="../layouts/body4.html">Informática</a></dd>
      <dd><a href="../layouts/body5.html">Consumiveis</a></dd>
      <dd><a href="../layouts/body5.html">Mobiliário</a></dd>
      <dd><a href="../layouts/body5.html">Máquinas</a></dd>
      <dd><a href="../layouts/body5.html">Escritório</a></dd>
      <dd><a href="../layouts/body5.html">Encadernação</a></dd>
      <dd><a href="../layouts/body5.html">Escrita</a></dd>
      <dd><a href="../layouts/body5.html">Embalagem</a></dd>
      <dd><a href="../layouts/body5.html">Ensino</a></dd>
      <dd><a href="../layouts/body5.html">Pastas e Dossiers</a></dd>
      <dd><a href="../layouts/body5.html">Limpeza</a></dd>
    </dl>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>
  <li>
    <!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
    <dl class="popdown">
      <dt class="three"><a href=#>CONTACTOS</a></dt>
      <dd><a href="spies.html">Contactos</a></dd>
      <dd><a href="vertical.html">Localização</a></dd>
      <dd><a href="expand.html">Questões</a></dd>
    </dl>
    <!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>
</ul>
</BODY>
</HTML>

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