Html Css与其他元素对齐

我想在悬停按钮1时显示panel1（div），在悬停按钮2时显示panel2（div）。但现在的问题是，面板无法将顶部与按钮对齐。我试过“垂直对齐，对齐项目”，但仍然不知道怎么做，请帮助

但它总是这样显示：

这是我的密码 HTML:

在这里检查你的答案

---

更新2：基于OP的小提琴

.Btn_Nav > span{
    background: transparent;
    background-color: transparent;
    display: inline-block;
    outline: none;
}
.Btn_Nav > span > label.Lb_Nav{
    background: transparent;
    background-color: transparent;
    display: inline-block;
}
#Span_Nav{
    position: absolute;
    width: 100px;
    top:10px;
}
button > div.Panel_Nav {
    margin-top: -2px;
    position: absolute;
    z-index: 1;
    transition-timing-function: ease;
    transition: linear .3s;
    visibility: hidden;
    opacity: 0;
    left: 100%;
    width: 500%;
    height: 20px;
    background: #0f5787;
    outline: none;
}
button:hover > div.Panel_Nav {
    visibility: visible;
    opacity: 1;
}

更新1： CSS代码

body {
    padding: 5px;
  background: blue;
}

.Btn_Nav{
  width: 10%;
  background: #eee;
  background-color: #eee;
  display: block;
  margin: 20px;
  border: 0;
  height: 100%;
}

.Btn_Nav > span > label.Lb_Nav{
  color: #333;
  background: transparent;
  background-color: transparent;
  display: block;
}
#Span_Nav{
  position: absolute;
  width: 100%;
}
button > div.Panel_Nav {
  margin-top: -2px;
  position: absolute;
  z-index: 1;
  transition-timing-function: ease;
  transition: linear .3s;
  vertical-align: top;
  display: none;
  opacity: 0;
  left: 12%;
  width: 50%;
  height: 18px;
  background: #0f5787;
}
button:hover > div.Panel_Nav {
  display: block;
  opacity: 1;
}

添加一个最大值可以解决这个问题

button:hover > div.Panel_Nav {
 visibility: visible;
 opacity: 1;
 top: 0;
}

---

它不起作用，因为所有面板都将位于按钮1旁边。您可以使用表来创建此类视图。在我看来，这要容易得多。您已经将视口高度指定为高度，而不是像素，因此基于页面高度，divs大小正在发生变化。使用表如何工作？我是初学者如果上述代码有效，您可以将其标记为已接受。如果您是一名初学者，那么使用此功能的html表格将具有挑战性。您可以阅读并亲自查看它是否有效：。基本上，您需要将按钮放在一列td中，并在相邻的列td中显示悬停时的div，然后将下一个悬停时的td作为目标。使用

vertical align:top

对齐元素。

.Btn_Nav > span{
    background: transparent;
    background-color: transparent;
    display: inline-block;
    outline: none;
}
.Btn_Nav > span > label.Lb_Nav{
    background: transparent;
    background-color: transparent;
    display: inline-block;
}
#Span_Nav{
    position: absolute;
    width: 100px;
    top:10px;
}
button > div.Panel_Nav {
    margin-top: -2px;
    position: absolute;
    z-index: 1;
    transition-timing-function: ease;
    transition: linear .3s;
    visibility: hidden;
    opacity: 0;
    left: 100%;
    width: 500%;
    height: 20px;
    background: #0f5787;
    outline: none;
}
button:hover > div.Panel_Nav {
    visibility: visible;
    opacity: 1;
}

body {
    padding: 5px;
  background: blue;
}

.Btn_Nav{
  width: 10%;
  background: #eee;
  background-color: #eee;
  display: block;
  margin: 20px;
  border: 0;
  height: 100%;
}

.Btn_Nav > span > label.Lb_Nav{
  color: #333;
  background: transparent;
  background-color: transparent;
  display: block;
}
#Span_Nav{
  position: absolute;
  width: 100%;
}
button > div.Panel_Nav {
  margin-top: -2px;
  position: absolute;
  z-index: 1;
  transition-timing-function: ease;
  transition: linear .3s;
  vertical-align: top;
  display: none;
  opacity: 0;
  left: 12%;
  width: 50%;
  height: 18px;
  background: #0f5787;
}
button:hover > div.Panel_Nav {
  display: block;
  opacity: 1;
}

button:hover > div.Panel_Nav {
 visibility: visible;
 opacity: 1;
 top: 0;
}