0

我在尝试使用（对我而言）“新”css3 制定一个小测试菜单时遇到问题。菜单应位于始终位于查看端口底部的页脚中。但是，我想弄乱 css3 提供的过渡效果，因此我想在菜单中增加一个点:hover。

菜单点设置float:left在相对菜单 div 中。过渡按预期进行，除了高度过渡将元素向下放大并（显然是页脚）超出页面。
相反，我希望菜单点向上增长。为了解决这个问题，我可以更改float:lefttoposition:absolute和 add bottom:0，但是我必须手动水平定位每个菜单点（超链接），这是我想避免的。由于菜单大小（菜单点数）应该是可变的，而且我也不想使用 JavaScript，所以我一无所知。

这是css和html：

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

感谢您的建议！

4

1 回答 1

2

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; }
于 2013-06-07T18:33:52.580 回答