Menu Dropdown com problema no IE8

[Ferreira Felipe 0]

Meus amigos, venho recorrer ao conhecimento dos amigos para resolver mais uma questão que esta me deixando mais ainda sem cabelos, rsrs.

 

Vejam a imagem o que esta ocorrendo com o meu menu.

 

Lembrando...

O menu funciona 100% nos navegadores: Firefox V4.0.1, Google Chrome V12. O único problema vem da porcaria do IE8 que tenho no PC..

 

Vamos ao código.

 

Código do CSS:

<style type="text/css">
body {
text-align:left;
}
a, a:hover, a:active, a:focus {
outline:0;
direction:ltr;
}

.wrapper {
position:relative; height:25px;
text-align:left;
}

.mainmenu {
position:absolute;
/* z-index: 999; */
font-family:Verdana, Geneva, sans-serif;
font-weight:normal;
font-size:90%;
line-height:25px;
left:50%;
margin-left:-400px;
width:745px;
}

ul.menu {
padding:0;
margin:0;
list-style:none;
width:150px;
overflow:hidden;
float:left;
margin-right:0px;
}

ul.menu a {
background: #F90;
text-decoration:none;
color:#fff;
padding-left:5px;
}

ul.menu li.list {
float:left;
width:250px;
margin:-32767px -125px 0px 0px;
/* background:url(images/top1.png) no-repeat left bottom; */
}

ul.menu li.list a.category {
position:relative;
z-index:50;
display:block;
float:left;
width:120px;
margin-top:32767px;
background:transparent;
}

ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
margin-right:1px;
background-image:url(images/tophover1.png);
background-repeat:no-repeat;
background-position:left top;

}

ul.submenu {
float:left;
padding:25px 0px 0px 0px;
margin:0;
list-style:none;
background-image:url(images/tophover1.png);
background-repeat:no-repeat;
background-position:left top;
margin:-25px 0px 0px 0px;
}

ul.submenu li a {
float:left;
width:120px;
background: #F90;
clear:left;
color: #006;
font-size:10px;
}

ul.submenu li a.endlist {
background:url(images/bottom1.png);
}

ul.submenu li a.endlist:hover,
ul.submenu li a.endlist:focus,
ul.submenu li a.endlist:active {
background:url(images/bottomhover1.png);
}

ul.submenu a:hover,
ul.submenu a:focus,
ul.submenu a:active {
background:#900;
margin-right:1px;
color:#fff;
}

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

img {
border:0px;
}
</style>

 

Código do HTML do menu:

<div class="wrapper">
   <div class="mainmenu">
       <ul class="menu">
       <li class="list"><a class="category" href="#"><img src="../img/bt_home.jpg" alt="Home" width="140" height="28" /></a></li>
       </ul>
       <ul class="menu">
           <li class="list">
               <a class="category" href="#"><img src="../img/bt_adicionar.jpg" alt="Adicionar" width="140" height="28" /></a>
               <ul class="submenu">
                   <li><a href="#">Sub Item1</a></li>
                   <li><a href="#">Sub Item2</a></li>
                   <li><a href="#">Sub Item3</a></li>
                   <li><a href="#">Sub Item4</a></li>
                   <li><a href="#">Sub Item5</a></li>
               </ul>
           </li>
       </ul>
       <ul class="menu">
           <li class="list">
               <a class="category" href="#"><img src="../img/bt_pesquisar.jpg" alt="Pesquisar" width="140" height="28" /></a>
               <ul class="submenu">
                   <li><a href="#">Sub Item1</a></li>
                   <li><a href="#">Sub Item2</a></li>
               </ul>
           </li>
       </ul>
       <ul class="menu">
           <li class="list">
               <a class="category" href="#"><img src="../img/bt_logoff.jpg" alt="Logoff" width="140" height="28" /></a>
           </li>
       </ul>
   </div>
</div>

 

Estou salvando esse codigo na extenção php. Mas acho que não tem problema não ne??

Agradeço a atenção de todos, forte abraço.

[William Bruno 1501]

ul.submenu {

utilize position absolute nesse .submenu~

 

e então position relative no li container dele.

[Ferreira Felipe 0]

Galera... Consegui arrumar, porém o menu esta apresentando falha...

Veja o codigo.

 

CSS:

 @charset "UTF-8";
/* CSS Document */

* {
   margin: 0;
   padding: 0;
}

body {
   font: 14px Helvetica, Sans-Serif;
   background: #FFF;
text-align: left;
}

#page-wrap {
   width: 800px;
   margin: 0px auto;
}

a {
   text-decoration: none;
}

ul {
   list-style: none;
}

p {
   margin: 15px 0;
}

/* ----------------------------------
   NIVEL UM
-----------------------------------*/

ul.dropdown {
   position: relative;
}

ul.dropdown li {
   background: #FFF;
   float: left;
   /*font-weight: bold;*/
}

ul.dropdown a:hover {
   color: #000;
}

ul.dropdown a:active {
   color: #E87400;
}

ul.dropdown li a {
   border-right: 1px solid #FFFFFF;
   color: #FFFFFF;
   display: block;
   padding: 2px 2px;
}

ul.dropdown li:last-child a {
   border-right: none;
} /* IE */

ul.dropdown li.hover, ul.dropdown li:hover {
   background: #FFF;
   color: black;
   position: relative;
}

ul.dropdown li.hover a {
   color: black;
}

/*----------------------------------
   NIVEL 2
----------------------------------*/

ul.dropdown ul {
   width: 150px;
   visibility: hidden;
   position: absolute;
   top: 100%;
   left: 0;
}

ul.dropdown ul li {
   font-weight: normal;
   background: #F90;
   color: #000;
   border-bottom: 1px solid #006;
   float: none;
text-align:left;
}

/* IE 6 & 7 */
ul.dropdown ul li a {
   border-right: none;
   width: 100%;
   display: inline-block;
} 

/*----------------------------------
   NIVEL 3
-----------------------------------*/

ul.dropdown ul ul {
   left: 100%;
   top: 0;
}

ul.dropdown li:hover > ul {
   visibility: visible;
}

/* -------------------------------
EXTRAS 
----------------------------------*/
img {
border:0px;
}

 

MENU:

<div id="page-wrap"> 

   <ul class="dropdown">
           <li><a href="logado.php"><img src="..img/bt_home.jpg" alt="Home" /></a></li>
           <li><a href="#"><img src="..img/bt_adicionar.jpg" alt="Adicionar" /></a>
               <ul class="sub_menu">
                   <li><a href="#">Item 1</a></li>
                   <li><a href="#">Item 2</a></li>
                   <li><a href="#">Item 3</a></li>
                   <li><a href="#">Item 4</a></li>
                   <li><a href="#">Item 5</a></li>
               </ul>
           </li>
           <li><a href="#"><img src="..img/bt_pesquisar.jpg" alt="Pesquisar" /></a>
               <ul class="sub_menu">
                    <li><a href="#">Item 1</a></li>
                    <li><a href="#">Item 2</a></li>
               </ul>
           </li>
           <li><a href="logoff.php"><img src="http://nupra.fcriativo.com.br/img/bt_logoff.jpg" alt="Logoff" /></a></li>
       </ul> 
</div>

 

O problema é o seguinte galera...

Quando eu passo o mouse depois do Item 2 o submenu fecha automaticamente. Esse erro so apresenta no IE8.

 

Agradeço muito a atenção de todos, bom final de semana.

 

Galera.. Ninguem pode me ajudar nessa dúvida??

 

Agradeço a atenção de todos... Abraço!

 

Ninguém???

Ainda estou com essa dúvida galerinha!!