Jump to content
Fórum Script Brasil
  • 0

Menu Css Não Funciona No Ff


Nelma

Question

Boa tarde

Eu peguei esse exemplo de menu para estudar, mas o problema é q ele não funciona no Firefox, no IE7 eu testei e rodou normal

Abaixo segui o codigo:

<style type="text/css">
<!--

ul#navmenu {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 760px; /*For KHTML*/
  list-style: none;
  height: 24px;
}

ul#navmenu li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left; /*For Gecko*/
  display: inline;
  list-style: none;
  position: relative;
  height: 24px;
}

ul#navmenu ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
}

ul#navmenu ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#navmenu ul li {
  width: 110px;/*width do submenu*/
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}

/* Root Menu */
ul#navmenu a {
  border: 1px solid #ffffff;
  border-right-color: #ffffff;
  border-bottom-color: #ffffff;
  padding: 0 2px;/*extensão do menu*/
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  background:#000099;
  color: #ffffff;
  font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
  background: #999999;
  color: #0A2B81;
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
  float: none;
  background: #999999;
  color: #0A2B81;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
  background: #ECEFF6;
  color: #0A2B81;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
   background:#999999;
  color: #FFFFFF;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
  background: #ECEFF6;
  color: #0A2B81;
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
  background: #EEE;
  color: #666;
}

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
  background: #CCC;
  color: #FFF;
}

ul#navmenu ul ul,
ul#navmenu ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 110px;/* posicinamento do submenu-submenu*/
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
  display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
  display: block;
}

-->
</style>


<body>
<ul id="navmenu">
  <li><a href="teste.php" target="_self">Opção1 + &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>
      <ul>
        <li><a href="teste2.php" target="_self">Teste2</a></li>
        <li><a href="teste3.php" target="_self">Teste3</a></li>
    </ul>
  <li><a href="#">Opção2 + &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
    <ul>
      <li><a href="#">Opção2.2 +&nbsp;&nbsp;</a>
        <ul>
          <li><a href="teste4.php" target="_self">Teste4</a></li>
          <li><a href="teste5.php" target="_self">Teste5</a></li>
        </ul>
</ul>

O problema no FF, é q não aaprece o submenu do Opção1 +, aparece somente niveis da Opção2 +.

Alguém sabe o por quê??

Valeu!!

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Aqui está seu código, já funcionando no Firefox.

Note que eu retirei a tag </li> da linha 155 e joguei-a na linha 159.

Fechei as tags </li> e </ul> que estavam faltando no final do código também.

Só uma observação, esse código NÃO RODOU no meu IE 6, o que não é bom, pois muitas pessoas ainda o utilizam.


<style type="text/css">
<!--

ul#navmenu {
margin: 0;
border: 0 none;
padding: 0;
width: 760px; /*For KHTML*/
list-style: none;
height: 24px;
}

ul#navmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 24px;
}

ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 24px;
left: 0;
}

ul#navmenu ul:after /*From IE 7 lack of compliance*/{
clear: both;
display: block;
font: 1px/0px serif;
content: ".";
height: 0;
visibility: hidden;
}

ul#navmenu ul li {
width: 110px;/*width do submenu*/
float: left; /*For IE 7 lack of compliance*/
display: block !important;
display: inline; /*For IE*/
}

/* Root Menu */
ul#navmenu a {
border: 1px solid #ffffff;
border-right-color: #ffffff;
border-bottom-color: #ffffff;
padding: 0 2px;/*extensão do menu*/
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
background:#000099;
color: #ffffff;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background: #999999;
color: #0A2B81;
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
float: none;
background: #999999;
color: #0A2B81;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #ECEFF6;
color: #0A2B81;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
background:#999999;
color: #FFFFFF;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
background: #ECEFF6;
color: #0A2B81;
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
background: #EEE;
color: #666;
}

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
background: #CCC;
color: #FFF;
}

ul#navmenu ul ul,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 110px;/* posicinamento do submenu-submenu*/
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
}

-->
</style>


<body>
<ul id="navmenu">
<li><a href="index.php" target="_self">Opção1 + &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
<ul>
<li><a href="teste2.php" target="_self">Teste2</a></li>
<li><a href="teste3.php" target="_self">Teste3</a></li>
</li>
</ul>
<li><a href="#">Opção2 + &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
<ul>
<li><a href="#">Opção2.2 +&nbsp;&nbsp;</a>
<ul>
<li><a href="teste4.php" target="_self">Teste4</a></li>
<li><a href="teste5.php" target="_self">Teste5</a></li>
</ul>
</li>
</ul>
</ul>
[/codebox]

Link to comment
Share on other sites

  • 0

Olá Lvcifer!

Obrigada pela ajuda...e pela dica tb, pois eu não havia testado no IE6.

Vou dar uma olhada no código e ver se encontro alguma solução para rodar no IE6, se é que tem solução.

Obrigada!!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.



  • Forum Statistics

    • Total Topics
      152k
    • Total Posts
      651.5k
×
×
  • Create New...