Estoy tratando de obtener un tercer nivel de menú desplegable / desplegable en este menú de navegación CSS. El segundo nivel funciona muy bien, solo se muestra cuando estás pasando el cursor sobre el enlace de nivel superior derecho. Sin embargo, el tercer nivel también se muestra cuando pasas el cursor sobre el nivel SUPERIOR. Debe estar oculto hasta que pase el mouse sobre el enlace desplegable de la derecha y luego se desplace hacia la derecha. Tengo la posición correcta, pero necesito que se oculte hasta que se mantenga el enlace correcto.

Aquí está el sitio en el que estoy trabajando:http: //174.37.160.2 (el tercer nivel está en Productos).

Aquí está mi CSS para todo el menú. Estoy seguro de que es algo realmente fácil de detectar, pero he intentado todo lo que puedo pensar. No soy un asistente de CSS ni nada.

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

Aquí está mi 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>