点击下拉项目，在导航的其他地方打开不同的下拉菜单？

Question

我导航的最顶层是一个水平的按钮栏。当用户悬停在顶层时，第二级下拉菜单会切换。是否有任何方法来编程我的导航，以便当用户点击特定的二级项目时，它将关闭第二级容器并自动在导航的其他位置打开另一个二级下拉列表，就好像在悬停？

换句话说，我的顶级导航栏是六个水平按钮。当用户将鼠标悬停在按钮4上时，他们将看到各种选择的下拉列表。当他们点击该下拉列表中的特定选项时，它会自动关闭按钮四下拉容器并在顶级按钮五下打开下拉容器，就像用户在其上面悬停一样？

（我已经搜索过了，但我发现没有任何与我的问题类似的内容。）

编辑：为每个请求添加代码。

按钮四下拉html：

  <li class="top-level"><a href="division4.html" class="top-link">Division4</a>
    <div class="drop_1col-topA" title="Menu by category">
      <div class="col_A">
        <ul>
           <li class="second-level"><a href="product1.html" class="second-link1" tabindex="1">Product1</a>
          </li>
          <li class="second-level"><a href="product2.html" class="second-link1" tabindex="2">Product2</a>
          </li>
          <li class="second-level"><a href="product3.html" class="second-link1" tabindex="3">Product3</a>
          </li>
          <li class="second-level"><a href="#" class="second-link1" tabindex="4">Division 5 Products</a>
          </li>
        </ul>
      </div>
    </div> 
  </li>

按钮五下拉html：

  <li class="top-level"><a href="division5.html" class="top-link">Division5</a>
    <div class="drop_1col-topA" title="Menu by category">
      <div class="col_A">
        <ul>
           <li class="second-level"><a href="product1.html" class="second-link1" tabindex="1">Product1</a>
          </li>
          <li class="second-level"><a href="product2.html" class="second-link1" tabindex="2">Product2</a>
          </li>
          <li class="second-level"><a href="product3.html" class="second-link1" tabindex="3">Product3</a>
          </li>
        </ul>
      </div>
    </div> 
  </li>

如果用户点击按钮4下拉菜单下的“分区5产品”，我希望它能自动打开按钮五下降，就好像用户正在徘徊在它上面一样。