Estou tentando obter um terceiro nível de menu desdobrável / suspenso neste menu de navegação CSS. O segundo nível funciona muito bem, só é exibido quando você passa o mouse sobre o link de nível superior direito. No entanto, o terceiro nível é exibido quando você passa o mouse sobre o nível TOP também. Ele deve ficar oculto até você passar o mouse sobre o link suspenso à direita e passar para a direita. Estou com a posição correta, mas preciso que ela oculte até que o link correto seja pausado.

Aqui está o site em que estou trabalhando:http: //174.37.160.2 (o terceiro nível está em Produtos

Aqui está o meu CSS para todo o menu. Tenho certeza de que é algo realmente fácil de detectar, mas tentei tudo o que consigo pensar. Não sou um assistente de CSS nem nad

.menu { height:32px; position:relative; z-index:100; }
.menu ul {padding:0;margin:0;list-style-type:none;}
.menu li {float:left;width:auto; padding-left:6px; padding-right:6px; position:relative;}
.menu ul li a { font-size:13px; }

.menu ul li ul li a { font-size:13px; }
.menu a, .menu a:visited {display:block; font-size:15px; text-decoration:none; color:#454545; height:30px; border:1px; padding-left:10px;}
.menu ul ul { visibility:hidden; position:absolute; height:0; top:20px; left:0; width:150px; }
.menu ul ul li { background:#272727; width:150px; text-align:left; padding-top:5px; padding-bottom:5px; }
.menu ul ul li:hover { background:#454545; }

.menu ul ul ul { visibility:hidden; position:absolute; height:0; top:0; left:150px; width:150px; }
.menu ul ul ul li { background:#272727; width:150px; text-align:left; padding-top:5px; padding-bottom:5px; }
.menu ul ul ul li:hover { background:#454545; }

.menu table {position:absolute; top:0; left:0; border-collapse:collapse;} /* style the table so that it takes no ppart in the layout - required for IE to work */
.menu ul ul a, .menu ul ul a:visited, .menu ul ul ul a, .menu ul ul ul a:visited { color:#fff; height:auto;}
.menu a:hover, .menu ul ul li:hover { }
.menu :hover > a, .menu ul ul :hover > a, .menu ul ul ul :hover > a {}
.menu ul li:hover ul, .menu ul a:hover ul, .menu ul ul li:hover ul { visibility:visible; }

Aqui está o meu código HTML:

<ul>
  <li><a href="/">Home</a>
              <li><a href="/about-us.html">About Us</a></li>
    <li><a href="/garage-door-services.html">Services</a>
                  <ul>
                    <li><a href="/residential-garage-door-services.html">Residential</a></li>
                    <li><a href="/commercial-overhead-door-services.html">Commerical</a></li>
                    <li><a href="/emergency-door-repair-services.html">Emergency</a></li>
                    <li><a href="/garage-door-preventative-maintenance.html">Maintenance</a></li>
                    </ul>
                </li>
  <li><a href="/garage-door-products.html">Products</a>
                  <ul>
                    <li><a href="#">Garage Doors</a>
                      <ul>
                        <li><a href="#">Residential Garage Doors</a></li>
                        <li><a href="#">Commercial Garage Doors</a></li>
                      </ul>
                    </li>
                        <li><a href="#">Openers & Operators</a></li>
                    </ul>
                </li>
                <li><a href="#">Online Store</a>
                     <ul>
                       <li><a href="/replacement-garage-door-remotes.html">Replacement Remotes</a></li>
                       <li><a href="/keyless-garage-entry.html">Keyless Entry</a></li>
                       <li><a href="/garage-door-gears-sprockets-parts.html">Gears & Sprocket Parts</a></li>
                         <li><a href="/garage-door-safety-beams.html">Safety Beams</a></li>
                         <li><a href="/garage-door-lube-grease.html">Lube & Grease</a></li>
                  </ul>
                </li>
                <li><a href="/contact-us.html">Ask a Pro</a>
                  <ul>
                      <li><a href="#">Submit a Question</a></li>
                        <li><a href="#">Newsletter</a></li>
                        <li><a href="#">FAQ's</a></li>
                        <li><a href="#">News</a></li>
                    <li><a href="#">Seasonal Tips</a></li>
                    </ul>
                </li>
            </ul>