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á.
Question
murilo563
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.