Question

当我悬停button1时，我想显示panel1（div），当我悬停button2时显示panel2（div）。但现在的问题是面板不会与按钮对齐。我已尝试过＆＃34; Vertical-Align，Align-items＆＃34;，仍然无法弄清楚如何去做，请帮忙！

但它始终显示如下：

这是我的代码 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

在https://jsfiddle.net/g3yL9cro/1/

检查您的答案

.Btn_Nav{
    position: relative;
}

button:hover > div.Panel_Nav {
    top: 0px;
}

Answer 2

更新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;
}

Css与其他元素

2 个答案: