Ir para conteúdo
Fórum Script Brasil
  • 0

Menu css com 3 niveis

murilo563

Perguntado por murilo563,

 Share

Pergunta

murilo563

murilo563

Postado
Postado

Bom pessoal estou fazendo um menu em css com 3 niveis, até ai beleza, mas o problema está sendo esconder o terceiro nivel quando eu passo o mouse sobre o primeiro nivel, logo que passo o mouse no primeiro nivel ele mostra os outros niveis, mas eu gostaria que mostrasse apenas o segundo e só mostrasse o terceiro nivel quando eu passasse o mouse sobre o menu de segundo nivel.

Me ajudem por favor, já pesquisei em vários lugares mas nada até agora.

Abaixo segue meu código em css.(ficou grande, mas está bem comentado! ) Grato desde já.

*{

margin:0;

padding:0;

border:0;

}

/*Caixa externa do menu*/

#caixa-menu{

overflow:hidden;

height:auto;

width:auto;

display:table;

line-height:22px;

box-shadow: 0 1px 5px 0px #a3a3a3;

}

/*Estrutura do menu*/

#caixa-menu > ul{

border:4px groove #134D26;

padding:opx;

margin:0px;

background-color:#C9E6CB;

display:inline-table;

cursor:pointer;

text-align:justify;

-moz-border-radius:7px;

-webkit-border-radius:7px;

border-radius:7px;

-webkit-box-shadow: #666 0px 2px 30px;

-moz-box-shadow: #666 0px 2px 30px;

box-shadow: #666 0px 2px 30px;

}

#caixa-menu > ul li {

background-image:-moz-linear-gradient(bottom, #C9E6CB 21%, #6CCF6F 57%, #134D26 100%);

background-image:-webkit-linear-gradient(bottom, #C9E6CB 21%, #6CCF6F 57%, #134D26 100%);

background-color:#C9E6CB;

text-shadow: 0 -1px 1px #a3a3a3;

color:#ffffff;

font-family:Verdana;

list-style-type:none;

border-bottom:1px solid #C9E6CB;

border-top:1px solid #134D26;

padding:0px;

padding-left:5px;

width:168px;

margin:0px;

vertical-align:super;

-moz-border-radius:7px;

-webkit-border-radius:7px;

border-radius:7px;

-webkit-box-shadow: #666 0px 2px 30px;

-moz-box-shadow: #666 0px 2px 30px;

box-shadow: #666 0px 2px 30px;

}

#caixa-menu > ul li:hover{

background-image:-moz-linear-gradient(bottom, #134D26 21%, #6CCF6F 57%, #C9E6CB 100%);

background-image:-webkit-linear-gradient(bottom, #134D26 21%, #6CCF6F 57%, #C9E6CB 100%);

background-color:#8ea38f;

color:black;

text-shadow: 0 -1px 1px #a3a3a3;

-moz-border-radius:7px;

-webkit-border-radius:7px;

border-radius:7px;

-webkit-box-shadow: #666 0px 2px 30px;

-moz-box-shadow: #666 0px 2px 30px;

box-shadow: #666 0px 2px 30px;

}

/*Submenus*/

#caixa-menu ul ul{

border:2px groove #000000;

display:none;

padding-left:0px;

margin-right:0px;

margin-left:10px;

background-image:-moz-linear-gradient(bottom, #C9E6CB 21%, #6CCF6F 57%, #134D26 100%);

background-image:-webkit-linear-gradient(bottom, #C9E6CB 21%, #6CCF6F 57%, #134D26 100%);

text-shadow:0 -1px 1px #a3a3a3;

min-width:170px;

-moz-border-radius:7px;

-webkit-border-radius:7px;

border-radius:7px;

-webkit-box-shadow: #666 0px 2px 30px;

-moz-box-shadow: #666 0px 2px 30px;

box-shadow: #666 0px 2px 30px;

}

#caixa-menu ul ul li{

list-style-type:none;

border-bottom:1px solid #000000;

border-top:1px solid #000000;

padding-left:0px;

margin-left:0px;

padding-right:0px;

width:auto;

}

/*Links do submenu*/

#caixa-menu ul ul li a:link,#caixa-menu ul ul li a:visited,#caixa-menu ul ul li a:hover{

border:2px groove #000000;

height:auto;

width:auto;

min-width:165px;

padding:0px;

background-image:-moz-linear-gradient(bottom, #C9E6CB 21%, #6CCF6F 57%, #134D26 100%);

background-image:-webkit-linear-gradient(bottom, #C9E6CB 21%, #6CCF6F 57%, #134D26 100%);

color:white;

background-color:#C9E6CB;

font-family:verdana;

display:table;

text-decoration:none;

font-weight:bold;

text-align:left;

-moz-border-radius:7px;

-webkit-border-radius:7px;

border-radius:7px;

-webkit-box-shadow: #666 0px 2px 30px;

-moz-box-shadow: #666 0px 2px 30px;

box-shadow: #666 0px 2px 30px;

}

#caixa-menu ul ul li a:hover{

background-image:-moz-linear-gradient(bottom, #134D26 21%, #6CCF6F 57%, #C9E6CB 100%);

background-image:-webkit-linear-gradient(bottom, #134D26 21%, #6CCF6F 57%, #C9E6CB 100%);

color:black;

background-color:#8ea38f;

-moz-border-radius:7px;

-webkit-border-radius:7px;

border-radius:7px;

-webkit-box-shadow: #666 0px 2px 30px;

-moz-box-shadow: #666 0px 2px 30px;

box-shadow: #666 0px 2px 30px;

}

#caixa-menu ul:hover ul{

display:table;

position:absolute;

box-shadow:0 2px 5px 0px #a3a3a3;

}

/*Menus de terceiro nivel*/

#caixa-menu ul ul ul{

border:2px groove #000000;

display:none;

padding-left:0px;

margin-right:0px;

margin-left:20px;

background-image:-moz-linear-gradient(bottom, #C9E6CB 21%, #6CCF6F 57%, #134D26 100%);

background-image:-webkit-linear-gradient(bottom, #C9E6CB 21%, #6CCF6F 57%, #134D26 100%);

text-shadow:0 -1px 1px #a3a3a3;

min-width:170px;

-moz-border-radius:7px;

-webkit-border-radius:7px;

border-radius:7px;

-webkit-box-shadow: #666 0px 2px 30px;

-moz-box-shadow: #666 0px 2px 30px;

box-shadow: #666 0px 2px 30px;

}

#caixa-menu ul ul ul li{

list-style-type:none;

border-bottom:1px solid #000000;

border-top:1px solid #000000;

padding-left:0px;

margin-left:0px;

padding-right:0px;

width:auto;

}

/*Links dos menus de terceiro nivel*/

#caixa-menu ul ul ul li a:link,#caixa-menu ul ul ul li a:visited,#caixa-menu ul ul ul li a:hover{

border:2px groove #000000;

height:auto;

width:auto;

min-width:165px;

padding:0px;

background-image:-moz-linear-gradient(bottom, #C9E6CB 21%, #6CCF6F 57%, #134D26 100%);

background-image:-webkit-linear-gradient(bottom, #C9E6CB 21%, #6CCF6F 57%, #134D26 100%);

color:white;

background-color:#C9E6CB;

font-family:verdana;

display:table;

text-decoration:none;

font-weight:bold;

text-align:left;

-moz-border-radius:7px;

-webkit-border-radius:7px;

border-radius:7px;

-webkit-box-shadow: #666 0px 2px 30px;

-moz-box-shadow: #666 0px 2px 30px;

box-shadow: #666 0px 2px 30px;

}

#caixa-menu ul ul ul li a:hover{

background-image:-moz-linear-gradient(bottom, #134D26 21%, #6CCF6F 57%, #C9E6CB 100%);

background-image:-webkit-linear-gradient(bottom, #134D26 21%, #6CCF6F 57%, #C9E6CB 100%);

color:black;

background-color:#8ea38f;

-moz-border-radius:7px;

-webkit-border-radius:7px;

border-radius:7px;

-webkit-box-shadow: #666 0px 2px 30px;

-moz-box-shadow: #666 0px 2px 30px;

box-shadow: #666 0px 2px 30px;

}

#caixa-menu ul:hover ul{

display:table;

position:absolute;

box-shadow:0 2px 5px 0px #a3a3a3;

}

Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...