Jump to content
Fórum Script Brasil
  • 0

Menu css com 3 niveis


murilo563
 Share

Question

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 to comment
Share on other sites

3 answers to this question

Recommended Posts

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share



  • Forum Statistics

    • Total Topics
      151k
    • Total Posts
      649.1k
×
×
  • Create New...