Ir para conteúdo

POWERED BY:

Arquivado

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

garnisss

Dois menus em conflito com CSS

Por , em Desenvolvimento frontend

Recommended Posts

garnisss    0

garnisss
Postado

Bom dia pessoal, vou tentar explicar o q esta acontecendo.

 

é o seguinte, tenho dois menus em um site, um horizontal e outro vertial.

 

ate agora o horizontal esta fncionando direitinho, é esse aqui.

#menu{
position:absolute;
left:12px;
width:756px;
height:27px;
z-index:2;
top: 140px;
}

.clearit {
margin: 0;
padding: 0;
height: 0;
clear: both;
}

/* BUBBLE PLASTIC HORIZONTAL MENU */

.bubplastic.horizontal {
width: 850px;
height: 25px;
margin: 0;
padding: 0;
background: #000000 url url(../images/menu/bg-bubplastic.gif) top left repeat-x;
}
.bubplastic.horizontal ul {
list-style: none;
margin: 0;
padding: 0;
}
.bubplastic.horizontal ul li {
float: left;
margin: 0;
padding: 0;
background: transparent url(../images/menu/bg-bubplastic-button.gif) top left no-repeat;
}

.bubplastic.horizontal ul li a {
height: 27px;
padding-left:30px;
padding-right:0px;
float:right;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;
color: #ffffff;
text-decoration: none;
}

.bubplastic.horizontal ul li a span.menu_ar {
display: block;
float: left;
height: 22px;
padding-top: 6px;
padding-right: 27px;
background: transparent url(../images/menu/bg-bubplastic-button.gif) top right no-repeat;
cursor: pointer;
}
/* END BUBBLE PLASTIC HORIZONTAL MENU */



/* AQUA HOVER */
.bubplastic.aqua ul li a:hover,
.bubplastic.aqua ul li.highlight a {
background: transparent url(../images/menu/bg-bubplastic-h-aqua.gif) top left no-repeat;
}

<div id="menu" class="menu bubplastic horizontal aqua">
<ul>
	<li><span class="menu_r"><a href="" target="_self"><span class="menu_ar">INÍCIO</span></a></span></li>
	<li><span class="menu_r"><a href="" target="_self"><span class="menu_ar">CLIENTES</span></a></span></li>
	<li><span class="menu_r"><a href="" target="_self"><span class="menu_ar">CREDENCIADOS</span></a></span></li>
	<li><span class="menu_r"><a href="" target="_self"><span class="menu_ar">CORRETORES</span></a></span></li>
	<li><span class="menu_r"><a href="" target="_self"><span class="menu_ar">REDE DE ATENDIMENTO</span></a></span></li>
	<li><span class="menu_r"><a href="" target="_self"><span class="menu_ar">CONTATO</span></a></span></li>
</ul>
<br class="clearit" />
</div>

 

agora quando eu incluo o segundo menu o vertical, esse horizontal menu acaba "pegando" as propriedades do vertical, que sao essas.

 

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
}

ul li {
position: relative;
}

li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}

ul li a {
display: block;
text-decoration: none;
color: #000000;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

ul {
margin: 0;
padding: 0;
list-style: none;
width: 150px;
border-bottom: 1px solid #ccc;
}

li:hover ul { 
display: block;
}

li:hover ul, li.over ul { 
display: block; 
}

a:hover {
color:#FFFFFF;
text-decoration:underline;
background-color:#004529;
font:bold;
}

.font {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
font:bold;
color:#000000;
}

<ul class="font"> 
   <li><a href="#">INSTITUCIONAL</a></li> 
   <li><a href="#">PLANOS E PRODUTOS</a> 
     <ul> 
       <li><a href="#">..</a></li> 
     </ul> 
   </li> 
   <li><a href="#">SERVIÇOS DO SITE</a> 
     <ul> 
       <li><a href="#">...</a></li> 
     </ul> 
   </li>

   <li><a href="#">PORTAL TISS</a> </li> 
   <li><a href="#">RESPONSABILIDADE SOCIAL</a> </li> 
   <li><a href="#">MEDICINA PREVENTIVA</a> </li> 
   <li><a href="#">RELACIONAMENTO EMPRESARIAL - GERE</a> </li> 
    <li><a href="#">BIO MASTER - MEDICINA DIAGNÓSTICA</a> </li> 
</ul>

 

Sei q estou fazendo alguma coisa muito errada, mas nao consigo achar onde nem o q =(

 

acho q deu para entenderem né??

 

muito obrigado

Compartilhar este post

Link para o post
Compartilhar em outros sites

André Buzzo    0

André Buzzo
Postado

Fala compadre!!!

 

Seguinte...no CSS existe uma coisa chamada herança....se você disser, na classe acima, que ela vai ter um comportamento, e no restante do seu código, você não dizer nada, rs, ele vai assumir o que foi dito primeiramente beleza?

 

Algo assim olha:

 

<div id="menu" class="menu bubplastic horizontal aqua">

<ul>

<li><span class="menu_r"><a href="" target="_self"><span class="menu_ar">INÍCIO</span></a></span></li>

<li><span class="menu_r"><a href="" target="_self"><span class="menu_ar">CLIENTES</span></a></span></li>

<li><span class="menu_r"><a href="" target="_self"><span class="menu_ar">CREDENCIADOS</span></a></span></li>

<li><span class="menu_r"><a href="" target="_self"><span class="menu_ar">CORRETORES</span></a></span></li>

<li><span class="menu_r"><a href="" target="_self"><span class="menu_ar">REDE DE ATENDIMENTO</span></a></span></li>

<li><span class="menu_r"><a href="" target="_self"><span class="menu_ar">CONTATO</span></a></span></li>

</ul>

<br class="clearit" />

</div>

 

Se você inserir mais um ul, li em qualquer outra parte do site, ele vai assumir as classes acima citadas....

O que você pode fazer é criar uma segunda div, de repente chamada #menu2 e declarar outras regras para as ul´s do site....

 

Abraços!

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

garnisss    0

garnisss
Postado

Opa vlw pela rapida resposta, entao ontem eu ate pensei nisso e tentei fazer mas nao consegui..

 

seria o seguinte, dentra da nova div #menu2 eu colocaria todos os atributos ul e ainfs correto??

 

mas eu nao consegui fazer isso, nao sei como colocar as ul dentro da tag #menu2, poderia me ajudar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

garnisss    0

garnisss
Postado

entao eu posso colocar varias #menu2 dentro do arquivo css?

 

tipo assim?


#menu2 ul li {
position: relative;
}

#menu2 li ul {
position: absolute;
left: 149px;
top: 0;
display: none;
}

#menu2 ul li a {
display: block;
text-decoration: none;
color: #000000;
background: #fff;
padding: 5px;
border: 1px solid #ccc;
border-bottom: 0;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

entao eu posso colocar varias #menu2 dentro do arquivo css?

sim. Normal isso.

 

o ID não deve se repetir no documento HTML.

no css, você apenas está 'referenciando ele', e não 'duplicando o atributo'.

Compartilhar este post

Link para o post
Compartilhar em outros sites

garnisss    0

garnisss
Postado

entao eu posso colocar varias #menu2 dentro do arquivo css?

sim. Normal isso.

 

o ID não deve se repetir no documento HTML.

no css, você apenas está 'referenciando ele', e não 'duplicando o atributo'.

 

Entendi, acabei de perceber isso, estava tentando fazer isso funcionar, uma parte eu consegui a outra nao =(

 

agora os menus nao estao se confundindo, mas parece q o menu lateral nao esta pegando os atributos do css =S

 

deve ter alguma coisa bagunçada aqui no html, vou dar uma olhada qualquer coisa pergunto novamente, vlw pessoal

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