如何在另一个元素的顶部显示元素？

Question

我正在尝试创建一个带有标签的导航栏，点击该标签时，会显示之前隐藏的其他标签。然后，当再次单击原始标记时，另一个标记将变为原来不可见。

我试过搜索堆栈溢出，w3学校并使用许多不同的答案尝试解决问题，但没有成功。以下是我将鼠标悬停在http://puu.sh/gpyZO/155eff729b.png上时的状态截图，这就是我想要发生的事情http://puu.sh/gpz5U/7a4c57e093.png。这样就可以看到扩展的链接位于下方其他链接的顶部。

以下是我在css中尝试过的事情：position（工作但其中一个标签与其他标签重叠），display，visibility，overflow，clearfix。我没有用JavaScript做很多样式，但这里是我试过的：看看hidden的值是否等于true然后改变它，所以它在if / else if结构中相反，反之亦然。

HTML：

<nav class="down">
<section class="down"><a name="#" class="hidden"></a>
<a href="#" class="down test">Hi</a>
<a href="bye" id="show" class="xtra">This</a>
<a href="bye" class="xtra">is</a>
<a href="bye" class="xtra">expanded</a>
<a href="bye" class="xtra">link</a>
</section>
<a href="hi" class="down">My</a>
<a href="hi" class="down">Name</a>
<a href="hi" class="down">Is</a>
<a href="hi" class="down">Curtis</a>
<a href="hi" class="down">Good</a>
<a href="hi" class="down">Bye</a>

CSS：

a {
      background-attachment: fixed; */There is more code but this seems the only relevant bit/*
  }

nav {
margin-bottom: 20px;
text-align: left;
vertical-align: top;
}

.down {
width: 50px;
display: inline-block;
}

.hidden {
visibility: hidden;
display: block;
margin-bottom: -10px;
}

section.down a.xtra  {
vertical-align: top;
display: none;
visibility: hidden;
}

section.down:hover a.xtra  {
vertical-align: top;
display: block;
visibility: visible;
width: inherit;
background-color: rgb(50, 200, 50); 
}

a.down {
width: 50px;
display: inline-block;
}