Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

-=ZuQuI=-

[Resolvido] Menu DropDown é sobreposto por Imagem

Por , em Desenvolvimento frontend

Recommended Posts

-=ZuQuI=-    0

-=ZuQuI=-
Postado

Boa tarde pessoal

 

Ja tentei de tudo procurei pelo forum e vi algumas dicas de usa o z-index mas mesmo assim não funciona de jeito nenhum

Então resolvi abri um tópico com os meus códigos da index.php e style.css estão incompletos mas acho que vcs conseguem te uma noção e de como o problema ocorre vou dar um print da tela tbm se caso ajuda obrigado

 

Esse é a pagina inicial com um jquery de slideshow na imagem

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Silpa Peças e Equipamentos Rodoviários | </title>
<link href="style.css" rel="stylesheet" type="text/css" />
<?php include"scripts.php"; ?>
</head>

<body>
<div id="box">

 <div id="header">
 <a href="http://www.silpa.com.br">
  <img src="images/header.png" />
 </a>
 </div><!--Header-->

 <div id="menu">
  <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Produtos</a>
    <ul>
     <li><a href="#">Eixos</a></li>
     <li><a href="#">Freios</a></li>
     <li><a href="#">Suspensões</a></li>
     <li><a href="#">Componentes</a></li>      
    </ul>
   </li>
   <li><a href="#">Representantes</a></li>
   <li><a href="#">Concessionárias</a></li>
   <li><a href="#">Contato</a></li>
  </ul>
  <form>
   <input type="text" name="Search" value="Código ou Descrição" />
   <input type="submit" name="Procurar" value="Buscar" class="search_btn" />
  </form>
 </div><!--Menu-->

 <div id="content">
<div id="destaque_mae"> 
<div id="destaque">
 <ul>
  <li>
  <a href="#">       
   <img src="uploads/destaques/01.jpg" width="560px" height="300px" alt="eixo tubular roda disco" /></a>
   </li>
   <li>
  <a href="#">       
   <img src="uploads/destaques/02.jpg" width="560px" height="300px" alt="eixo tubular roda disco" /></a>
   </li>
   <li>
  <a href="#">       
   <img src="uploads/destaques/03.jpg" width="560px" height="300px" alt="eixo tubular roda disco" /></a>
   </li>
   <li>
  <a href="#">       
   <img src="uploads/destaques/04.jpg" width="560px" height="300px" alt="eixo tubular roda disco" /></a>   
   </li>
   <li>
  <a href="#">       
   <img src="uploads/destaques/05.jpg" width="560px" height="300px" alt="eixo tubular roda disco" /></a>    
   </li>
</div><!--Destaque-->
 <div id="nav" class="nav"></div><!--Marcador Destaque-->
</div><!--Destaque Mae-->

 

O menu todo é feito só com CSS e HTML como vcs podem ver eu botei o z-index e mesmo assim não funciona não sei mais oque faço com isso.

#box{width:1000px; margin:0 auto; font:Verdana, Geneva, sans-serif;}
#header{float:left;}
#header a img{text-decoration:none; border:0px;}
#menu{width:960px; height:45px; background:#5C5C5C; float:left; z-index:200;}
#menu ul{margin:0 0 0 20px; height:45px; padding:0; float:left; list-style:none;}
#menu ul li{display:inline; background:#5C5C5C; position:relative;  float:left;}
#menu ul li:hover ul{display:block; float:left;}
#menu ul li a{text-decoration:none; float:left; padding:11px 8px 9px 8px; color:#FFFFFF; font:18px Verdana, Geneva, sans-serif;}
#menu ul li a:hover{background:#666; border-bottom:3px solid #069;}
#menu ul li ul{position:absolute; top:45px; display:none;}
#menu form{float:right; margin:7px 20px 0 0;}
#menu input{width:200px; height:24px;}
#menu .search_btn{width:80px; height:29px; background:#006699; border:1px solid #000; font:16px Verdana, Geneva, sans-serif; color:#FFFFFF;}
#menu .search_btn:hover{background:#fff; color:#006699; cursor:pointer;}
#content{width:960px; float:left; background:#E0E0E0;}
#destaque_mae{float:left; width:560px; height:322px; margin:10px 0 0 20px;;}
#destaque{width:560px; float:left; z-index:-1000;}
#destaque a{text-decoration:none; border:0;}
#destaque ul{list-style:none;}
#destaque ul li a img{text-decoration:none; border:0;}
#nav{left: 35px; float:right; }
#nav a { margin: 0 5px; padding: 3px 5px; border: 1px solid #ccc; background:#069; text-decoration: none; color:#fff; }
#nav a.activeSlide {background:#999;}
#nav a:focus { outline: none; }

 

 

 

Esta é a imagem da pagina inicial a seleção em vermelho é onde deveria aparecer o menu dropdown no link de Produtos

index.png

 

 

 

DESDE JA AGRADEÇO

Compartilhar este post

Link para o post
Compartilhar em outros sites

-=ZuQuI=-    0

-=ZuQuI=-
Postado

Adicione a seguinte linha no seu CSS:

 

#menu ul li {
 z-index: 1; 
}

 

VALEU VELHO BRIGADÃO SE EU SOUBESSE QUE ERA TÃO SIMPLES ASSIM

se tiveh dicas pra mim melhora meu css pode posta ai valeu brigadão mesmo salvo minha vida

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito