如何垂直/向上轉換？

Question

下面的代碼有效，但當鼠標懸停在選項卡上時，選項卡會垂直向下擴展。我如何向上擴展它？

ul.nav li a { 
-webkit-transition: all 0.3s ease-out; 
background: #cbcbcb ; 
color: #174867; 
padding: 7px 5px 7px 5px; 
width: 50px; 
height:100px; 
display: block; 
text-decoration: none; 
-webkit-box-shadow: 2px 2px 4px #888; 
} 

ul.nav li a:hover { 
background: #ebebeb ; 
color: #67a5cd; 
padding: 80px 5px 0px 5px; 
} 

<div class="navbox"> 
<ul class="nav"> 
<li><a href="#">Bad</a></li> 

</ul> 
</div> 

http://jsfiddle.net/jtwsJ/1/

Answer 1

1. 定義margin-top爲您元素

2. 在hover減少的值保證金你增加元素

DEMO

ul.nav li a { 
    -webkit-transition: all 0.3s ease-out; 
    background: #cbcbcb ; 
    color: #174867; 
    padding: 7px 5px 7px 5px; 
    width: 50px; 
    height:100px; 
    margin-top: 200px; 
    display: block; 
    text-decoration: none; 
    -webkit-box-shadow: 2px 2px 4px #888; 
} 

ul.nav li a:hover { 
    margin-top: 100px; 
    height: 200px; 
    background: #ebebeb ; 
    color: #67a5cd; 
} 

的高度

Answer 2

想到的相對定位元素，然後改變top財產上移您要添加到箱量的最簡單方法。

1. 添加position: relative和top: 0到非懸停狀態。

2. 將top: -66px添加到懸停狀態。

這將導致something like this。 （注意：我在頂部增加了額外的空間，所以你可以看到它向上移動而不是離開屏幕）。