Submenu atrás do banner principal

[Teteu Six 4]

Bom dia!

Pessoal é o seguinte, eu estou desenvolvendo um site para no mínimo IE8, só que tive que fazer para no mínimo IE7, e o menu horizontal ele tem um sub menu em cada item, e esse sub menu fica atrás do banner principal apenas no IE7.

 

HTML do cabeçalho (no qual está o menu) e o banner

<div class="content_top_header">
   <!-- logo -->
   <a href="index.php" class="logo"></a>
   <span class="subtitle_logo">a tecnologia a favor<br />do homem do campo!</span>

   <ul id="menu">
       <!-- button 01 -->
       <li>
           <a class="menu_title" href="javascript: void(0);">
               produtos
           </a>
           <ul id="menu_list">
               <li>
                   <a href="produto.php">
                       cata-capim
                   </a>
               </li>
               <li>
                   <a href="produto.php">
                       vagão forrageiro
                   </a>
               </li>
               <li>
                   <a href="produto.php">
                       concha
                   </a>
               </li>
               <li>
                   <a href="produto.php">
                       desensilador
                   </a>
               </li>
               <li>
                   <a href="produto.php">
                       raspo
                   </a>
               </li>
           </ul>            
       </li>

       <!-- button 02 -->
       <li>
           <a class="menu_title" href="javascript: void(0);">
               indústria
           </a>
           <ul id="menu_list">
               <li>
                   <a href="empresa.php">
                       conheça a schemaq
                   </a>
               </li>
               <li>
                   <a href="qualidade.php">
                       qualidade
                   </a>
               </li>
           </ul>            
       </li>

       <!-- button 03 -->
       <li>
           <a class="menu_title" href="javascript: void(0);">
               programa
           </a>
           <ul id="menu_list">
               <li>
                   <a href="trabalhe_conosco.php">
                       trabalhe conosco
                   </a>
               </li>
               <li>
                   <a href="financiamento.php">
                       financiamento
                   </a>
               </li>
               <li>
                   <a href="eventos.php">
                       eventos
                   </a>
               </li>
               <li>
                   <a href="seja_um_representante.php">
                       seja um representante
                   </a>
               </li>
               <li>
                   <a href="seja_um_representante.php">
                       seja um representante
                   </a>
               </li>
               <li>
                   <a href="seja_um_representante.php">
                       seja um representante
                   </a>
               </li>
           </ul>            
       </li>

       <!-- button 04 -->
       <li>
           <a class="menu_title" href="javascript: void(0);">
               imprensa
           </a>
           <ul id="menu_list">
               <li>
                   <a href="download.php">
                       Materiais
                   </a>
               </li>
               <li>
                   <a href="login.php">
                       download
                   </a>
               </li>
               <li>
                   <a href="download.php">
                       área do cliente
                   </a>
               </li>
           </ul>            
       </li>

       <!-- button 05 -->
       <li>
           <a class="menu_title" href="javascript: void(0);" style="margin-right: 0px;">
               contato
           </a>
           <ul id="menu_list">
               <li>
                   <a href="contato.php">
                       fale conosco
                   </a>
               </li>
           </ul>       
       </li>
   </ul>



   <p id="bread_crumb">
       <a href="index.php">
           <span>home</span>
       </a>
        | <a href="javascript: void(0);">
           <span>produtos</span>
       </a>
        | <span>nome do produto</span>
   </p>
</div>
<!-- rotating banner -->
<div id="rotating_banner"></div>

 

E o CSS (sem hack para IE7):

.content_top_header {
   display: block;
   height: 100px;
   position: relative;
   width: 940px;
}
.logo {
   background: url("../../image/default/header/logo.png") no-repeat scroll 0 0 transparent;
   display: inline-block;
   height: 80px;
   margin-left: 20px;
   margin-top: -30px;
   width: 215px;
}
.logo:hover {
   background-position: 0 -80px;
}
.subtitle_logo {
   display: block;
   font-size: 11px;
   margin-left: 20px;
   text-align: center;
   text-transform: uppercase;
   width: 215px;
}

.fundo_menu {
   background: -moz-linear-gradient(top, #FFF100, #FFCC05) repeat-X;
   background: -webkit-gradient(linear, left top, left bottom, from(#FFF100), to(#FFCC05)) repeat-X;
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFF100, endColorstr=#FFCC05)";
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFF100, endColorstr=#FFCC05);
   border-radius: 5px 5px 5px 5px;
   height: 35px;
   margin-left: 425px;
   margin-top: -58px;
   position: absolute;
   width: 515px;
}
#menu {
   float: right;
   margin-top: -58px;
   min-width: 445px;
   overflow: visible;
   padding: 7px;
   position: relative;
   width: auto;
}
#menu li {
   display: inline-block;
   margin-top: 6px;
}
#menu .class-for-ie7 {
}
#menu li a {
   background: url("../../image/default/header/arrow.png") no-repeat scroll 8px -12px transparent;
   border-radius: 3px 3px 0px 0px;
   color: #4e4e4e;
   font-family: 'Swis721', arial;
   font-size: 11px;
   margin-right: 4px;
   padding: 7px 10px 11px 20px;
   text-transform: uppercase;
}

#menu .class-for-ie7 .menu_title {
}
#menu li a:hover {
   background: url("../../image/default/header/arrow.png") no-repeat scroll 8px 11px #4C4C4C;
   color: #FFFFFF;
   font-family: 'Swis721', arial;
   text-decoration: none;
}
#menu li a span {
}
#menu li a span:hover {
}
#menu li ul {
   background: url("../../image/default/header/menu_.png") repeat scroll 0 0 transparent;
   display: none;
   margin-top: 11px;
   min-width: 120px;
   position: absolute;
   width: auto;
   z-index: 1;
}
#menu li ul li {
   display: block;
   margin: 0;
}
#menu li ul li a {
   background: none repeat scroll 0 0 transparent;
   border-radius: 2px 2px 2px 2px;
   color: #FFFFFF;
   display: inline-block;
   font-family: arial;
   font-weight: normal;
   height: 10px;
   margin-right: 0;
   padding: 4px 10px 9px 15px;
   text-decoration: none;
   text-transform: capitalize;
   position: relative;
   z-index: 999;
}
#menu li ul li:hover {
   background: url("../../image/default/header/menu_hover.png") repeat scroll 0 0 transparent;
   text-decoration: none;
}
#menu li ul li a:hover {
   background: none repeat scroll 0 0 transparent;
   text-decoration: none;
   font-family: arial;
}
#menu li ul li a span {
}
#rotating_banner {
   background: url("../../image/default/header/temp.png") no-repeat scroll center top #CCCCCC;
   display: block;
   height: 420px;
   position: relative;
   width: 940px;
}

#menu_list {
   border-radius: 0px 3px 3px 3px;
}

#bread_crumb {
   float: right;
}
#bread_crumb a {
}
#bread_crumb a span {
   color: #797A7C;
}
#bread_crumb span {
   color: #006F3D;
   font-size: 11px;
   font-weight: bold;
   text-transform: uppercase;
}

 

CSS com hack para IE7

.content_top_header {
   display: block;
   height: 100px;
   position: relative;
   width: 940px;
}
.logo {
   background: url("../../image/default/header/logo.png") no-repeat scroll 0 0 transparent;
   display: inline-block;
   height: 80px;
   margin-left: 20px;
   margin-top: -30px;
   width: 215px;
}
.logo:hover {
   background-position: 0 -80px;
}
.subtitle_logo {
   display: block;
   font-size: 11px;
   margin-left: 20px;
   text-align: center;
   text-transform: uppercase;
   width: 215px;
}

.fundo_menu {
   background: -moz-linear-gradient(top, #FFF100, #FFCC05) repeat-X;
   background: -webkit-gradient(linear, left top, left bottom, from(#FFF100), to(#FFCC05)) repeat-X;
   -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFF100, endColorstr=#FFCC05)";
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFF100, endColorstr=#FFCC05);
   border-radius: 5px 5px 5px 5px;
   height: 35px;
   margin-left: 425px;
   margin-top: -58px;
   position: absolute;
   width: 515px;
}
#menu {
   float: right;
   margin-top: -58px;
   min-width: 445px;
   overflow: visible;
   padding: 7px;
   position: relative;
   *position: absolute;
   *margin-left: 425px;
   width: auto;
}
#menu li {
   display: inline-block;
   *display: inline;
   margin-top: 6px;
}
#menu .class-for-ie7 {
   *position: relative;
   *z-index: 100;
}
#menu li a {
   background: url("../../image/default/header/arrow.png") no-repeat scroll 8px -12px transparent;
   border-radius: 3px 3px 0px 0px;
   color: #4e4e4e;
   font-family: 'Swis721', arial;
   font-size: 11px;
   /*font-weight: bold;*/
   margin-right: 4px;
   padding: 7px 10px 11px 20px;
   text-transform: uppercase;
}

#menu .class-for-ie7 .menu_title {
   *padding: 7px 6px 4px 18px;
}
#menu li a:hover {
   background: url("../../image/default/header/arrow.png") no-repeat scroll 8px 11px #4C4C4C;
   color: #FFFFFF;
   font-family: 'Swis721', arial;
   text-decoration: none;
}
#menu li a span {
}
#menu li a span:hover {
}
#menu li ul {
   background: url("../../image/default/header/menu_.png") repeat scroll 0 0 transparent;
   display: none;
   margin-top: 11px;
   min-width: 120px;
   position: absolute;
   width: auto;
   z-index: 1;
   *margin-top: 25px;
   *margin-left: -17%;
   *z-index: 10000000000;
}
#menu li ul li {
   display: block;
   *position: relative;
   *z-index: 10000000000;
   margin: 0;
}
#menu li ul li a {
   background: none repeat scroll 0 0 transparent;
   border-radius: 2px 2px 2px 2px;
   color: #FFFFFF;
   display: inline-block;
   *display: block;
   font-family: arial;
   font-weight: normal;
   height: 10px;
   margin-right: 0;
   padding: 4px 10px 9px 15px;
   text-decoration: none;
   text-transform: capitalize;
   position: relative;
   z-index: 999;
}
#menu li ul li:hover {
   background: url("../../image/default/header/menu_hover.png") repeat scroll 0 0 transparent;
   text-decoration: none;
}
#menu li ul li a:hover {
   background: none repeat scroll 0 0 transparent;
   text-decoration: none;
   font-family: arial;
}
#menu li ul li a span {
}
#rotating_banner {
   background: url("../../image/default/header/temp.png") no-repeat scroll center top #CCCCCC;
   height: 420px;
   position: relative;
   width: 940px;
   *z-index: 1;
}

#menu_list {
   border-radius: 0px 3px 3px 3px;
}

#bread_crumb {
   float: right;
}
#bread_crumb a {
}
#bread_crumb a span {
   color: #797A7C;
}
#bread_crumb span {
   color: #006F3D;
   font-size: 11px;
   font-weight: bold;
   text-transform: uppercase;
}

 

Desde já agradecido! :D

[Helike Long 0]

Amigo, conheces o conceito de 'z-index'?

Tentarei ter dar uma explicação didática sobre:

O 'z-index' faz com que teu design transforme-se numa espécie de psd, com várias camadas.

O valor que tu põem é o número da camada, quanto maior, 'mais acima' a camada está.

Agora dê um 'ctrl+f' nesse teu código e verifique os 'z-index'.

Verás que o z-index do teu banner é 1 e os z-index's do seu menu variam de 1 a 9999999 (nem lembro qual era o maior número, mas tinha algo assim).

Ajeite o z-index do teu menu, e aumente o z-index do banner.

Isso deve resolver.

Espero ter ajudado,

~HLK