Css Aligned Top with other element - html

Question

I want to show panel1(div) when I hover button1, show panel2(div) when I hover button2. But the problem now is that the panel won't align top with the button. I've tried "Vertical-Align, Align-items", still couldn't figure out how to do it, please help!
But it always display like this:
Here is my code
HTML:
<div class="Nav">
<span id='Span_Nav'>
<button class="Btn_Nav" id="Btn_Nav_Equipment" >
<div class="Panel_Nav" id='Panel_Equipment'></div>
<span>
<label class="Lb_Nav">Equipment</label>
</span>
</button>
<button class="Btn_Nav" id="Btn_Nav_Report">
<div class="Panel_Nav" id='Panel_Report' ></div>
<span>
<label class="Lb_Nav">Report</label>
</span>
</button>
</span>
</div>
CSS:
.Btn_Nav{
width: 100%;
background: transparent;
background-color: transparent;
display: inline-block;
outline: none;
border: 0;
height: 6vh;
}
.Btn_Nav > span{
background: transparent;
background-color: transparent;
display: inline-block;
outline: none;
}
.Btn_Nav > span > label.Lb_Nav{
color: white;
background: transparent;
background-color: transparent;
display: inline-block;
}
#Span_Nav{
position: absolute;
width: 100%;
top:10vh;
}
button > div.Panel_Nav {
margin-top: 0;
position: absolute;
z-index: 1;
transition-timing-function: ease;
transition: linear .3s;
vertical-align: top;
visibility: hidden;
opacity: 0;
left: 100%;
width: 500%;
height: 6vh;
background: #0f5787;
border: 2px solid;
outline: none;
}
button:hover > div.Panel_Nav {
visibility: visible;
opacity: 1;
}

Answer 1

Check your answer here https://jsfiddle.net/g3yL9cro/1/
.Btn_Nav{
position: relative;
}
button:hover > div.Panel_Nav {
top: 0px;
}

Answer 2

Update 2: Based on OP's fiddle
.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;
}
Update 1:
CSS code
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;
}
Adding a top value fixes the issue.
button:hover > div.Panel_Nav {
visibility: visible;
opacity: 1;
top: 0;
}