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; }