css footer menu transition

Question

"나를위한" "새"css3을 사용하여 작은 테스트 메뉴를 작성하는 데 문제가 있습니다. 메뉴는 항상보기 포트의 하단에있는 꼬리말에 있어야합니다. 그러나 나는 전환 효과 css3 제공하므로 주위에 어지럽히고 싶습니다 당신이 :hover 때 메뉴의 한 지점을 성장하고 싶습니다.

메뉴 항목은 상대 메뉴 div에 float:left으로 설정되어 있습니다. 전환은 높이 전이가 요소를 아래쪽으로 (분명히 바닥 글과 같이) 페이지 밖으로 확대하는 것을 제외하고는 의도 한대로 수행됩니다.
대신 메뉴 점이 커지도록하고 싶습니다. 이 문제를 해결하려면 float:left을 position:absolute으로 변경하고 bottom:0을 추가 할 수 있습니다. 그러나 수동으로 모든 메뉴 점 (하이퍼 링크)을 수평 위치에 놓아야합니다. 수동으로 피하고 싶습니다. 메뉴 크기 (메뉴 점의 수)는 가변적이어야하며 자바 스크립트를 사용하고 싶지 않기 때문에 나는 우둔합니다.

<div id="footer"> 
    <div class="menu"> 
     <a href="#">menp1</a> 
     <a href="#">menp2</a> 
     <a href="#">menp3</a> 
     <a href="#">menp4</a> 
     <a href="#">menp5</a> 
     <a href="#">menp6</a> 
    </div> 
</div> 

와 CSS : : 조언을

#footer { 
    position: absolute; 
    background-color: #497044; 
    bottom: 0px; 
    width: 100%; 
    height: 45px; 
    padding: 5px; } 

div.menu { 
    position: relative; 
    height: 45px; 
    width: 480px; 
    left: 50%; 
    margin-left: -240px; } 

div.menu a { 
    float:left; 
    width: 80px; 
    height: 50px; 
    border: 3px dashed; 
    margin-left: 5px; 
    text-align: center; 
    -moz-transition: height 2s; } 
div.menu a:hover { 
    background-color: white; 
    height: 100px; } 

감사

여기에 CSS와 HTML입니다! 이 같은 의미

Answer 1

http://jsfiddle.net/nqCgu/2/

?

이렇게하려면 음수 여백 - 위쪽 값과 여백 - 가기 전환을 사용할 수 있습니다. 추가 :

div.menu { ... 
transition: margin-top .2s; 
-moz-transition: margin-top .2s;} 

div.menu a:hover { 
margin-top:-50px; 
background-color:white; 
height: 100px; }