Dificuldade em menu horizontal drop down

t_e_e_m · April 19, 2009 at 08:26 PM

Boas Tenho o meu site em que esta em fase de construção, e desejava substituir o menu que tenho actualmente, por um horizontalmas com sub menus.

Tentei adapatra este: h**p://css-tricks.com/examples/SimplejQueryDropdowns/

ao meu site o qual nao estou a conseguir. Aletro tudo na boa, mas ao inserir no meu site deixa de funcionar correctramente.

O meu codigo css:

/*-----------------------------------------------------------Estrutura geral do site *------------------------------------------/



/* Deixar as margens 0 em todo o site */
* {
margin:0;
pading:0;
}
/* Border das imagens 0 */
img {
border:0;
}
/* cor e letra todo o site */
body {
background-image: url(Imagens/bg-sidebar.png);
font-family: Tahoma;
}
/* formatação */
h1, h2 {
font-size:14px;
font-weight:bold;
}
p {
font-size:12px
}
.nota {
font-size:11px;
color: #3333FF;
}
/* Estrutura geral do site */
#geral {
width:730px;
height:650px;
margin:0 auto; /* centra o div geral */
}
/* Topo do site e altura */
#topo {
width:730px;
height:156px;
}
/* border-bottom:2px solid #fbc970;*/


/* Espaço menus */
#menus {
width:730px;
height:38px;
background-image: url(Imagens/bg_menu2.jpg);
}
#menus ul {
list-style-type:none;
background-image: url(Imagens/bg_menu2.jpg); background-repeat:repeat-x;
}
#menus ul li {
display:inline;
}
#menus ul li a {
padding:10px 25px;
float:left;
text-decoration:none;
color:#77787b;
border-left: 1px solid #a09a94
}
#menus ul li a:hover {
color: #000;
}
/*CONTEUDO DO SITE*/

#conteudo {
width:730px;
height:392px;
background-color:#feefd6;
border-top: 2px solid  #feefd6;
}


#coluna_esq {
width:550px;
height:392px;
padding-left:0px;
border-right: 3px solid #d9d9df;
float:left;

}

/* Inicio do rodape */
#Rodape {
width:730px;
height:49px;
border-top:0px solid #fae5c3;
background-image: url(Imagens/bg-sidebar.png);
padding-top:0px;
color:#000000;
text-align:center;
font-size:10px;
}

/*------------------------------------------------------FIM Estrutura geral do site *------------------------------------------*/





/* _____________________________________________________Coluna esq da pagina index*_______________________________________*/



/* Coluna esqtop */

.coluna_esqtopindex {
width:511px;
height:108px;
padding-left:39px;
float: right;
}
/* Formatação */


.coluna_esqtopindex img {
margin:5px;
float:left;
}
.coluna_esqtopindex h1 {
color:#a2a2a3;
padding:5px 0;
}
/* Links */

.coluna_esqtopindex p a {
color:#a2a2a3;
text-decoration:none;
}
.coluna_esqtopindex p a:hover {
text-decoration:underline;
}
/* Parte de baixo da coluna esquerda */

.coluna_esqbotindex {
width:438px;
height:230px;
background-repeat:no-repeat;
margin:14px 0 0 43px;
padding:10px 20px 10px;
_margin:13px 0 0 22px;
background-image:url(Imagens/bg_evento.jpg);
float:left;

}


/* Formatação */

.coluna_esqbotindex h1 {
color: #666666;
padding-bottom:5px;
font-size:12px;
font-weight:bolder;

}
.coluna_esqbotindex h2 {
color: #a2a2a3;
padding-top:5px;
font-size:12px;
font-weight:bolder;
}
.coluna_esqbotindex h3 {
color: #666666;
padding-left: 300px;
font-size:12px;
font-weight:bolder;

}

.coluna_esqbotindex p {
color: #999999;
font-size:11px;
text-align:justify;
}

.coluna_esqbotindex p a {
color:#0000CC;
text-decoration:none;
}
.coluna_esqbotindex p a:hover {
text-decoration: underline;
}
.coluna_esqbotindex img {
float:left;
margin:26px 5px;
}

/* _____________________________________________________FIM Coluna esq da pagina index*_______________________________________*/



/* _____________________________________________________Coluna esq da pagina admnass*_________________________________________ */

.coluna_esqbot {
width:438px;
height:350px;
background-repeat:no-repeat;
margin:14px 0 0 43px;
padding:10px 20px 10px;
_margin:13px 0 0 22px;
background-image: url(Imagens/equipa.gif);
float:left;
text-align:center;
}




.coluna_esqbot1 {
width:170px;
height:190px;
float: left;
text-align:left;
margin-left: 20px;
_margin: 13px 0 0 22px;
_padding: 0;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;


}

/* Formatação da coluna bot1*/

.coluna_esqbot1 h1 {
color: #666666;
padding-bottom:5px;
font-size:12px;
font-weight:bolder;

}
.coluna_esqbot1 h2 {
color: #333333;
padding-top:5px;
font-size:12px;
font-weight:bolder;
}
.coluna_esqbot1 h3 {
color: #666666;
padding-left: 300px;
font-size:12px;
font-weight:bolder;

}

.coluna_esqbot1 p {
color: #333333;
font-size:11px;
line-height: 20px;
}

.coluna_esqbot1 p a {
color:#666666;
text-decoration: underline;
}
.coluna_esqbot1 p a:hover {
text-decoration: underline;
}
.coluna_esqbot1 img {
float:left;
margin:26px 5px;
}


/*Fim da formatação da coluna bot 1*/


/*Formatação da coluna bot 2*/

.coluna_esqbot2 {
width:172px;
height:180px;
background-repeat:no-repeat;
float: left;
text-align:left;
padding-top: 10px;
padding-right: 20px;
padding-bottom: 10px;
padding-left: 20px;
}

.coluna_esqbot2 h1 {
color: #666666;
padding-bottom:5px;
font-size:12px;
font-weight:bolder;

}
.coluna_esqbot2 h2 {
color: #333333;
padding-top:5px;
font-size:12px;
font-weight:bolder;
}
.coluna_esqbot2 h3 {
color: #666666;
padding-left: 300px;
font-size:12px;
font-weight:bolder;

}
.coluna_esqbot2 h3 {
color: #a2a2a3;
padding-top:5px;
font-size:12px;
font-weight:bolder;
}
.coluna_esqbot2 p {
color: #333333;
font-size:11px;
line-height: 20px;
}




/*Fim da formatação da coluna bot 2*/


/*Formatação da coluna bot 3*/

.coluna_esqbot3 {
width:384px;
height:50px;
float: left;
text-align:left;
margin-left: 20px;
_margin: 13px 0 0 22px;
_padding: 0;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;

}

.coluna_esqbot3 h1 {
color: #666666;
padding-bottom:5px;
font-size:12px;
font-weight:bolder;

}
.coluna_esqbot3 h2 {
color: #333333;
padding-top:5px;
font-size:12px;
font-weight:bolder;
}
.coluna_esqbot3 h3 {
color: #666666;
padding-left: 300px;
font-size:12px;
font-weight:bolder;

}
.coluna_esqbot3 h3 {
color: #a2a2a3;
padding-top:5px;
font-size:12px;
font-weight:bolder;
}
.coluna_esqbot3 p {
color: #333333;
font-size:11px;
}

.coluna_esqbot3 p a {
	color:#666666;
text-decoration: underline;
}


.coluna_esq_cont p a:hover {
text-decoration: underline;
}
.coluna_esqbot3 img {
float:left;
margin:26px 5px;
}




/* _____________________________________________________FIM Coluna esq da pagina admnass*_________________________________________ */



#coluna_dta {
width:167px;
height:382px;
padding: 5px;
float:left;
background-color: #FFFFFF;
}
.coluna_dta1 {
withh: 167px;
height: 382px;
background-image:url(Imagens/fundo%20copy.jpg);
background-repeat:no-repeat;
}
/*Formatação coluna dta 1*/

.coluna_dta1 h1 {
font-size:16px;
color:#999999;
}

.coluna_dta1 h2 {
font-size:13px;
color:#999999;
}
.coluna_dta1 h3 {
font-size:10px;
color:#999999;
font-stretch:narrower;
}	

.coluna_dta1 p {
font-size:12px;
color:#999999;
}


/* FORMATAÇÃO DAS Colunas PAG CONTACTOS */

.coluna_esq_cont {
width:438px;
height:350px;
background-repeat:no-repeat;
margin:14px 0 0 43px;
padding:10px 20px 10px;
_margin:13px 0 0 22px;
background-image: url(Imagens/contacto.gif);
float:left;
text-align:center;
}

/* Formatação da coluna esq cont  */

.coluna_esq_cont h1 {
color: #666666;
letter-spacing: 1px;
padding-bottom:5px;
font-size:15px;
font-weight:bolder;
text-align: left;


}
.coluna_esq_cont h2 {
color: #666666;
padding-top:5px;
font-size:12px;
font-weight:bolder;
text-decoration:underline;
}
.coluna_esq_cont h3 {
color: #666666;
font-size:12px;
font-weight:bolder;
text-align:left;

}

.coluna_esq_cont p {
color: #555555;
font-size:11px;
font-weight:bolder;
line-height: 25px;
}

.coluna_esq_cont p a {
color:#666666;
text-decoration: underline;
}
.coluna_esq_cont p a:hover {
text-decoration: underline;
}
.coluna_esq_cont img {
float:left;
margin:26px 5px;
}

.coluna_esq_cont1 {
width:398px;
height:190px;
background-repeat:no-repeat;
float: left;
text-align:left;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;

}

/*Formatação coluna esquerda cont1*/
/*sao as da coluna esquerda contactos*/




.coluna_esq_cont2 {
width:398px;
height:60px;
background-repeat:no-repeat;
float: left;
text-align:left;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}


/*Formatação coluna esquerda cont2*/
/*sao as da coluna esquerda contactos*/





/* FIM FORMATAÇÃO DAS Colunas PAG CONTACTOS */	

/*PAGINA FORMCALL*/
.coluna_formulario {
width:438px;
height:350px;
background-repeat:no-repeat;
margin:14px 0 0 43px;
padding:10px 20px 10px;
_margin:13px 0 0 22px;
background-image: url(Imagens/msn.gif);
float:left;
text-align:center;
}

/* Formatação da coluna esq contactos  */

.coluna_formulario h1 {
color: #666666;
letter-spacing: 1px;
padding-bottom:5px;
font-size:15px;
font-weight:bolder;
text-align: left;


}
.coluna_formulario h2 {
color: #666666;
padding-top:5px;
font-size:12px;
font-weight:bolder;
text-decoration:underline;
}
.coluna_formulario h3 {
color: #666666;
font-size:12px;
font-weight:bolder;
text-align:left;

}

.coluna_formulario p {
color: #555555;
font-size:11px;
font-weight:bolder;
line-height: 25px;
}

.coluna_formulario p a {
color:#666666;
text-decoration:none;
text-decoration: underline;
}
.coluna_formulario p a:hover {
text-decoration: underline;
}
.coluna_formulario img {
float:left;
margin:26px 5px;
}


.coluna_formulario_top {
width:410px;
height:300px;
background-repeat:no-repeat;
float: right;
text-align:left;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;

}

/*_______________________________________________________________________________________________________________
                                      Formatação da pagina instalações 
_______________________________________________________________________________________________________________*/




.coluna_esq_instalaçao {
width:438px;
height:350px;
background-repeat:no-repeat;
margin:14px 0 0 43px;
padding:10px 20px 10px;
_margin:13px 0 0 22px;
background-image: url(Imagens/instalacao.gif);
float:left;
text-align:center;
}

/* Formatação da coluna esq cont  */

.coluna_esq_instalaçao h1 {
color: #666666;
letter-spacing: 1px;
padding-bottom:5px;
font-size:15px;
font-weight:bolder;
text-align: left;


}
.coluna_esq_instalaçao h2 {
color: #666666;
padding-top:5px;
font-size:12px;
font-weight:bolder;
text-decoration:underline;
}
.coluna_esq_instalaçao h3 {
color: #666666;
font-size:12px;
font-weight:bolder;
text-align:left;

}

.coluna_esq_instalaçao p {
color: #555555;
font-size:11px;
font-weight:bolder;
line-height: 15px;
}

.coluna_esq_instalaçao p a {
color:#666666;
text-decoration:none;
text-decoration: underline;
}
.coluna_esq_instalaçao p a:hover {
text-decoration: underline;
}
.esq_instalaçao img {
float:left;
margin:26px 5px;
}



.coluna_instalaçao1 {
width:400px;
height:90px;
background-repeat:no-repeat;
float: left;
text-align:left;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;

}

.coluna_instalaçao2 {
width:393px;
height:150px;
background-repeat:no-repeat;
float: left;
text-align:left;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 30px;
}



/*_______________________________________________________________________________________________________________
                                      Formatação da pagina exames 
_______________________________________________________________________________________________________________*/




.coluna_esq_exame {
width:438px;
height:350px;
background-repeat:no-repeat;
margin:14px 0 0 43px;
padding:10px 20px 10px;
_margin:13px 0 0 22px;
background-image: url(Imagens/exames.gif);
float:left;
text-align:center;
}

/* Formatação da coluna esq cont  */

.coluna_esq_exame h1 {
color: #666666;
letter-spacing: 1px;
padding-bottom:5px;
font-size:15px;
font-weight:bolder;
text-align: left;


}
.coluna_esq_exame h2 {
color: #666666;
padding-top:5px;
font-size:12px;
font-weight:bolder;
text-decoration:underline;
}
.coluna_esq_exame h3 {
color: #666666;
font-size:12px;
font-weight:bolder;
text-align:left;

}

.coluna_esq_exame p {
color: #555555;
font-size:11px;
font-weight:bolder;
line-height: 15px;
}

.coluna_esq_exame p a {
color:#666666;
text-decoration:none;
text-decoration: underline;
}
.coluna_esq_exame p a:hover {
text-decoration: underline;
}
.esq_exame img {
float:left;
margin:26px 5px;
}



.coluna_exame1 {
width:409px;
height:90px;
background-repeat:no-repeat;
float: left;
text-align:left;
padding-top: 20px;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;

}

.coluna_exame2 {
width:398px;
height:150px;
background-repeat:no-repeat;
float: left;
text-align:left;
padding-top: 10px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 30px;
}

E o meu codigo html:

<!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>Crb</title>
<link href="style2.css" rel="stylesheet" type="text/css"/>
<style type="text/css">
<!--
.style8 {
font-size: 12
}
.style13 {
font-size: 9px;
color: #fbc970;
font-weight: bold;
}

-->
</style>
</head>
<body>
<div id="geral">
<div id="topo"><img src="Imagens/Topo.jpeg" /></div>
<div id="menus">
<ul>
<li>
  <h1><a href="index.html" >CRB</a></h1>
</li>
<li>
  <h1><a href="equipa.html">CRB</a></h1>
</li>
<li>
  <h1><a href="instalacao.html">CRB</a></h1>
</li>
<li>
  <h1><a href="exame.html">CRB</a></h1>
</li>
<li>
  <h1><a href="acordo.html">CRB</a></h1>
</li>
<li>
  <h1><a href="call.html">CRB</a></h1>
</li>
</ul>
</div>
<div id="conteudo">
<div id="coluna_esq">
<div class="coluna_esqtopindex"><img src="Imagens/477x104.jpg"/></div>
<div class="coluna_esqbotindex">
  <h1>CCB  </h1>
  <p>Este espaço destina-se a uma nota introdutória ao site.B</p>
</div>
</div>

<div id="coluna_dta">
<div class="coluna_dta1">
<p> </p>
<h1> </h1>
<p> </P>
<h3 class="style8"><strong>Rua ABC</strong></h3>
<h3 class="style8"><strong>B442 B</strong></h3>
<h3 class="style8"><strong>Telef: /1/2/3/4</strong></h3>
<h3><span class="style8">mail.telepac.p</span>t</h3>
<p> </p>
<p> </p>
<h1> </h1>
<p> </p>
<p> </p>
<p><strong>GPS</strong>: </p>
<p> </p>
<p> </p>
<p> </p>
<p align="center"><a href="http://maps.google.pt/maps/ms?ie=UTF8&hl=pt-PT&msa=0&msid=113805434940049411188.000465b694592de828756&ll=38.010408,-7.860192&spn=0.003474,0.006866&t=h&z=17" target="_blank"><img src="Imagens/localiz.jpg" alt="Carregue sobre a imagem" /></a> </p>
<div align="center"><span class="style13">Carregue Sobre a imagem</span></div>
<p align="center"> </p>
</div>
</div>
</div>
<div id="Rodape"> <strong>© CRB 2009 </strong>(JF)<em><br />
  </em></div>
</div>
</div>
</body>
</html>

Será qie me podem ajudar, nesta integração. mantendo a imagem de fundo da div menu.

Battousai · April 19, 2009 at 10:31 PM

<li> com <h1>?

Ai os básicos... <h1> é um elemento que não deve ser repetido numa página e é block. Portanto não vai fazer o que tu queres a não ser que lhe metas um float ou display:inline.

Mas teres vários h1 não é boa prática.

t_e_e_m · April 20, 2009 at 05:19 PM

Mas o que queria era tirar o menu do meu codigo e colocar o menu que encontrei e postei no link! sera que é possivel?

Sign In

Dificuldade em menu horizontal drop down

Recommended Posts

t_e_e_m

Battousai

t_e_e_m

Create an account or sign in to comment

Create an account

Sign in

Home

Activity

Revista PROGRAMAR

Important Information