html - 修复元素，以便只有悬停在上面的元素会延伸？

Question

我目前有一个由四个 div 组成的顶级菜单:Home、Menu、Order 和 Review。我已将其设置为每个 div 在悬停时扩展 100px。此时一切正常。然后，我在每个 div 的扩展区域内添加了一些文字和图像。现在，每当我将鼠标悬停在任何一个 div 上时，它都会扩展，但它会携带其余的 div。我想要它，以便只有我悬停的 div 会扩展，其余部分将保留在原处。这是 html:

<div class="TopNav">
            <a href="file:///C:/Users/Justin/SkyDrive/Documents/Websites/Snack%20Shack%202/SS2.html"><div class="Home">
                <h4>Home</h4> <br><br>
                <p>Learn about us!</p>
                <img class="Hamburger" src="http://i.imgur.com/0htcpM2.png" title="source: imgur.com" />
            </div></a>

            <a href="file:///C:/Users/Justin/SkyDrive/Documents/Websites/Snack%20Shack%202/SS2%20Menu.html"><div class="Menu">
                <h4>Menu</h4>
            </div></a>

            <a href="file:///C:/Users/Justin/SkyDrive/Documents/Websites/Snack%20Shack%202/SS2%20Order.html"><div class="Order">
                <h4>Order</h4>
            </div></a>

            <a href="file:///C:/Users/Justin/SkyDrive/Documents/Websites/Snack%20Shack%202/SS2%20Review.html"><div class="Review">
                <h4>Review</h4>
            </div></a>
        </div>

这是CSS:

.Home:hover, .Menu:hover, .Order:hover, .Review:hover{
    height: 150px;
}

.Home, .Menu, .Order, .Review {
    height:50px;
    width:100px;
    display:inline-block;
    position:relative;
    z-index:1;
    transition: height .5s ease-in-out;
    -webkit-transition: height .5s ease-in-out;
    overflow:hidden;
}

.Home p, .Menu p, .Order p, .Review p {
    text-align:right;
    color:white;
    position:relative;
    right:2px;
    bottom:5px;
}

.Home h4, .Menu h4, .Order h4, .Review h4 {
    text-align:center;
    color:white;
    position:relative;
    bottom:5px;
    font-family:Garamond;
}

.Hamburger {
    height:40px;
    width:auto;
    position:relative;
    left:50px;
    top:10px;
    display:inline-block;
}

有人知道如何解决这个问题吗？

Answer 1

添加vertical-align: top;至 .Home, .Menu, .Order, .Review

inline-block元素与 bottom 对齐取最高元素 vertical-align: baseline;默认，但你可以 align它到 top通过添加 vertical-align:top

演示 - http://jsfiddle.net/hsj2ebc2/1/