由于父填充，子对象只在一个方向(向下)增长。悬停时文本向下移动

Question

我的代码(第二个演示)和工作代码(第一个演示)在字面上是相同的，但我认为在我的代码中发生的悬停效果是，父元素的填充被尊重，并且不允许孩子向上生长。为什么第一个演示(橙色背景)不会发生这种情况，我该如何修复我的演示？请注意，添加边框是为了进行调试。

编辑:我已经找到原因了。这是由于.menu a中的float:left。谁能解释一下为什么？我知道float:left将元素放在容器的左侧，但为什么这会在下面产生不希望看到的效果？我想不出为什么其中一个暗示了另一个。

​

@import url(https://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0px;
}
div {
  padding: 24px;
  text-align: center;
  font-family: Raleway;
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  border: 1px solid blue;
}

#nav-3 {
  background: #EEA200;
}

.link-3 {
  transition: 0.4s;
  color: #ffffff;
  font-size: 20px;
  text-decoration: none;
  padding: 0 10px;
  margin: 0 10px;

}
.link-3:hover {
  background-color: #eeeeee;
  color: #EEA200;
  padding: 24px 10px;
}

<div id="nav-3">
    <a class="link-3" href="#">Home</a>
    <a class="link-3" href="#">About</a>
    <a class="link-3" href="#">Contact</a>
    <a class="link-3" href="#">Shop</a>
</div>

​

​

.header {
  height: 50px;
  background-color: #008b10;
}


.menu {

padding: 16px;
text-align:center;
font-family: Raleway, arial, sans-serif;
float:left;
overflow: visible;
border: 1px solid blue;
}

 .menu a:hover {

background-color: #ffffff;
color: #008b10;
padding: 16px 5px;

}

.menu a {
/*box-sizing: border-box;*/
float: left;
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 18px;
text-decoration: none;
padding: 0 5px;
border: 1px solid red;
}

<div class=header>
        <div class="menu">
            <a class="help" href="#" id="online_help">Help</a>
            <a class="logout" href="#" onclick="openLogout();">Logout</a>
        </div>
</div>

​

Answer 1

​

.header {
  background-color: #008b10;
}


.menu {
padding: 16px;
text-align:center;
font-family: Raleway, arial, sans-serif;
overflow: visible;
border: 1px solid blue;
}

.menu a {
text-decoration: none;
transition: 0.4s;
color: #ffffff;
font-size: 18px;
text-decoration: none;
padding: 0 5px;
margin: 0 10px;
}
.menu a:hover {
  background-color: #ffffff;
  color: #008b10;
  padding: 16px 5px;
}

<div class=header>
        <div class="menu">
            <a class="help" href="#" id="online_help">Help</a>
            <a class="logout" href="#" onclick="openLogout();">Logout</a>
        </div>
</div>

​

因为float:left指定了放置在容器左侧的元素。