Question

我对这种悬停效果有点疑问，我试图在菜单中创建。我只是希望每个盒子在盘旋时向上移动一点。然而，从我生产的东西来看，高度变化很好，但是它需要列表中的所有其他内容。我希望它可以单独更改高度，而无需移动其他菜单项。

有没有人对我应该怎么做才能解决这个问题？

我已尝试对个人而不是ul进行绝对定位，但这会破坏居中（所有列表项目都会相互坍塌而且我被迫有不精确的定位，无法通过浏览器正确缩放。）

感谢您的时间和耐心（我对此感到陌生，仍在学习。）

这里有一个fiddle来展示我正在谈论的内容。

这是标记：

<div class="navband">
   <div class="nav">
     <ul>
       <li><a href="#">Work</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Blog</a></li>
       <li><a href="#">Contact</a></li>
     </ul>
   </div>
</div>

CSS：

.nav {
    text-align: center;
}

.nav ul {
    position: absolute;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}

.nav ul li {
    list-style: none;
    display: inline;
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.nav ul li a {
    display: inline-block;
    text-decoration: none;
    background: #F7941E;
    color: #414042;
    text-transform: uppercase;
    height: 130px;
    width: 120px;
}

.nav ul li a:hover {
    height: 150px;
}

Answer 1

这是我想出的：

http://jsfiddle.net/lhill86/Lnm6q0wy/

希望这有帮助

添加了一个aditonnal容器：

<div class="navband">
   <div class="nav">
     <ul>
       <li><div class="nest"><a href="#">Work</a></div></li>
       <li><div class="nest"><a href="#">About</a></div></li>
       <li><div class="nest"><a href="#">Blog</a></div></li>
       <li><div class="nest"><a href="#">Contact</a></div></li>
     </ul>
   </div>
</div>

这里是CSS：

.nav {
    text-align: center;
}

.nav ul {
    position: absolute;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
    height:150px;
}

.nav ul li {
    list-style: none;
    display: inline-block;
    padding-left: 0.5em;
    padding-right: 0.5em;
    background:white;
    height:150px;
}

.nav ul li a {
    display: inline-block;
    text-decoration: none;
    background:#F7941E;
    color: #414042;
    text-transform: uppercase;
    height: 130px;
    width: 120px;
}
.nest{
    display:inline-block;
    margin-bottom:0px;
    height:130px;
    background-color: #F7941E;
}
.nest a:hover{
    height: 150px;
    margin-top:0px;
}

编辑：抱歉没有发布最新版本。但这是有效的最终CSS：

.nav {
    text-align: center;
}

.nav ul {
    position: absolute;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0px;
    margin-bottom:0;
    left: 0;
    right: 0;
    height:150px;
}

.nav ul li {
    list-style: none;
    display: inline-block;
    padding-left: 0.5em;
    padding-right: 0.5em;
    background:white;
    height:150px;
}

.nav ul li a {
    display: inline-block;
    text-decoration: none;
    background:#F7941E;
    color: #414042;
    text-transform: uppercase;
    height: 130px;
    width: 120px;
}
.nest{
    display:inline-block;
    margin-bottom:0px;
    height:130px;
    background-color: #F7941E;
}
.nest a:hover{
    position:relative;
    top:-20px;
    height: 150px;
}

Answer 2

使用填充代码如下：

.nav ul li a:hover {
padding-top:30px;
}

小提琴：http://jsfiddle.net/YoshiMaster/Lnm6q0wy/3/

Answer 3

实现这一目标的一个想法是，转移margin-top属性。

由于您在display: inline上应用了li，margin-top和margin-bottom将无效a。您可以考虑将display: block用于li并将其浮动到左侧

.nav ul li {
    display: block;
    float: left;
}

然后将margin-top设置为a并在悬停时将其删除。

.nav ul li a {
    margin-top: 20px;
}

.nav ul li a:hover {
    margin-top: 0;
}

因此，您将获得所需的输出。

<强> DEMO

如何在不搞砸其他列表项的情况下向上设置列表项的高度？

3 个答案: