Ir para conteúdo

POWERED BY:

Arquivado

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

cassiombc

[Resolvido] Posição do menu

Por , em Desenvolvimento frontend

Recommended Posts

cassiombc    0

cassiombc
Postado

Galera, boa tarde,

estou desenvolvendo um site e o meu sub-menu fica escondido atras do slide, mas se eu removo o slide ele aparece normal

o código é esse

 

Por favor me ajudem

@charset "utf-8";
/* CSS Document */
*
{
margin:0px;
padding:0px;
}
ul
{
	list-style-type:none;
}
/*=================================================*/
body
{
font-family: Arial, Verdana, Helvetica, sans-serif;
   font-size:12px;
margin:0;
padding:0;
background:#CCC;
background: #4996cc url(images/degrade_bg.png) repeat-x fixed;
}
/*=================================================*/
#banner
{
width:977px;
height:100px;
margin:auto;
background-image:url(images/logo1.png);
padding:0px;
margin-top:10px;
   -webkit-border-radius: 8px;

}
/*=================================================*/
#corpo
{
margin:auto;
   width:980px;

margin-bottom:10px;

}
/*=================================================*/
#barra
{
border-bottom:none;
float:left;


}
/*=================================================*/
#conteudo
{

float:left;
height:auto;
margin-left:255px;

}
/*=================================================*/
#rodape
{
float:left;
width:980px;
height:55px;
margin-top:250px;
text-align:center;
clear:both;
margin-top:0px;
border-top: 2px solid #f4792c;
background:#000;
-webkit-border-radius: 8px;
margin: auto;

}
.footerCenter{
   width: 380px;
   text-align: right;
   padding-top: 16px;
padding-left:190px;
   font-size: 14px;
   float: left;

}

/*=================================================*/
ul#menu
{
width:980px;
font-family: Arial, Verdana;
   font-size: 14px;
   font-weight:bold;
position:relative;


}
ul#menu li
{
position:relative;
float:left;
display:inline;

}
ul#menu li a 
{
display:block;
float:left;
padding:0 15px;
height:30px;
line-height:25px;
background:url(images/degrade_button.png) repeat-x;
color:#00C;
text-decoration:none;
width:105px;
text-align:center;
border-top: 1px solid #FFF;
padding-top:10px;
   padding-left: 44px;
   padding-right: 45px;
  	min-width: 105px;
white-space: nowrap;
margin-left:1px;

}
ul#menu li a:hover 
{
background:url(images/degrade_button2.png) repeat-x;
position: static;
}
ul#menu li ul
{
display:none;
position:absolute;
top:41px;
/*left:0;*/
}
ul#menu li:hover ul
{
display:block;
}
ul#menu li ul a
{
width:auto;
}/*=================================================*/
#pagina
{
float:left;
width:977px;
height:auto;
background:white;

}
/*=================================================*/
#slide
{
width:977px;
height:250px;	
position:relative;
}
.slide
{
position:relative;	
}

/*=================================================*/
ul#menuLateral
{
font-family: Arial, Verdana;
   font-size: 12px;
   font-weight:bold;
float:left;
margin-top:-675px;

}

ul#menuLateral li
{
position:relative;

}
ul#menuLateral li a 
{
display:block;
padding:0 15px;
height:30px;
line-height:25px;
background:url(images/degrade_button3.png) repeat-x;
color:#00C;
text-decoration:none;
width:105px;
text-align:center;
border-top: 1px solid #FFF;
padding-top:10px;
   padding-left: 45px;
   padding-right: 45px;
  	min-width: 105px;
white-space: nowrap;
margin-left:1px;
}
ul#menuLateral li a:hover 
{
background:url(images/degrade_button2.png) repeat-x;
}

 

<!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" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen"> 


<script type="text/javascript">

$(function(){
	$('div#slide').cycle({
		pager:'.pager',
		})		
	})
</script>

<title>Seatech</title>
</head>

<body>
<div id="banner"></div>	
<div id="corpo">
    	<div id="barra">        	
                   <ul id="menu">
                       <li><a href="#">Home</a></li>
                       <li><a href="#">Produtos</a></li>
                       <li><a href="#">Empresa</a></li>
                       <li><a href="#">Serviços</a>
                           <ul>
                               <li><a href="#">T.I.</a></li>
                               <li><a href="#">Embalagens</a></li>
                               <li><a href="#">Gráfica</a></li>
                                <li><a href="#">RMA</a></li>
                           </ul>
                       </li>
                       <li><a href="#">Fale-Conosco</a>
                           <ul>
                               <li><a href="#">Formulário</a></li>
                               <li><a href="#">Chat</a></li>
                               <li><a href="#">Vendedores</a></li>
                           </ul>
                        </li>
                   </ul>              
         </div>

         <div id="pagina">
             <div id="slide">


             </div>         
             <div id="conteudo">
             <img src="images/img_grade.png">
             </div>             
             <ul id="menuLateral">
             		<li><a href="#">Gabinetes</a></li>
                   <li><a href="#">HeadFones</a></li>
                   <li><a href="#">Alto-Falantes</a></li>
                   <li><a href="#">Fontes</a></li>
                   <li><a href="#">Mouses</a></li>
                   <li><a href="#">Teclados</a></li>
                   <li><a href="#">WebCams</a></li>
                   <li><a href="#">Servidores</a></li>
                   <li><a href="#">Bases Cooler</a></li>	
             </ul>
         </div>  
         <div id="rodape">
              <div class="footerCenter"><a href="http://www.seatechbrasil.com">© 2010 Seatech Brasil</a>
              </div>
         </div>      
   </div>
</div>

</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

cassiombc    0

cassiombc
Postado

Obrigado por todos eu consegui resolver, apenas no css alterei da seguinte maneira

#slide
{
width:977px;
height:250px;	
position:inherit;
}

 

A bronca voltou, quando eu ativo o Jquery que começa os slides a rodar o submenu fica escondido.

Me Ajudem

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