Я пытаюсь получить 3-й уровень всплывающего / выпадающего в этом меню навигации CSS. Второй уровень отлично работает, отображается только при наведении курсора на ссылку верхнего уровня справа. Тем не менее, третий уровень показывает, когда вы наводите курсор и на верхний уровень. Он должен быть скрыт до тех пор, пока вы не наведете указатель мыши на правую раскрывающуюся ссылку, а затем не развернетесь вправо. У меня правильная позиция, но мне нужно, чтобы она скрывалась, пока не появится правильная ссылка.

Вот сайт, над которым я работаю:http://174.37.160.21 (3-й уровень находится под продуктами).

Вот мой CSS для всего меню. Я уверен, что это действительно легко заметить, но я перепробовал все, что мог придумать. Я не мастер CSS или что-то еще.

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

Вот мой 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>