如何使用子部分创建导航？

Question

我正在尝试使用子部分创建导航栏。主链接是一个内联显示的列表，鼠标当前所在的链接的子部分应显示在主列表下的另一个列表中。我目前用一个基本上如下的列表完成了这个：

HTML

<ul>
  <li id="one">Primary One</li>
  <li id="two">Primary Two</li>
  <li id="three">Primary Three</li>
  <li id="hidden-one">Secondary One</li>
  <li id="hidden-one">Secondary Two</li>
</ul>

SASS

#hidden-one {
  display: none;
}

#one:hover ~ #hidden-one {
  display: inline;
}

如果鼠标悬停在Primary One元素上，那么文本就会出现。但我无法点击链接，因为当我将鼠标从元素移动到辅助链接时它们会消失。

我不知道如何实现可以点击那些次要元素。即使我试图避免它，也可以使用javascript解决方案。

如果有人知道如何做到这一点会很棒。