更改列表项的高度而不影响其他列表项

Question

我的页脚只包含一个无序列表，如下所示：

我正在尝试创建如下所示的悬停状态：

因此，当您将鼠标悬停在列表项上时，它会向上展开并显示下方的图像。

到目前为止，我为实现这一目标所做的一切尝试都会导致所有列表项的高度在一个列表项发生时扩展；我似乎无法让悬停的列表项在不影响所有其他项的情况下扩展高度。我也无法弄清楚如何让列表项的“文本”部分在悬停状态下保持在列表项的顶部。

编辑： 请注意，列表项的数量是动态的，并且网站是响应式的。我需要列表项始终填写浏览器窗口的整个宽度（无论窗口有多宽，以及有多少列表项）。我在无序列表上使用display: table 和table-layout: fixed，在列表项上使用display: table-cell 来实现这一点。

我还需要a 填充整个列表项，以便单击图像或文本区域将用户带到a href="..." 位置。

这是一个带有我当前 HTML 和 CSS 的 jsFiddle： http://jsfiddle.net/tsfMD/

我当前的 HTML 是：

<footer>
    <ul>
        <li><a href="#">Text</a></li>
        <li><a href="#">Text</a></li>
        <li><a href="#">Text</a></li>
        <li><a href="#">Text</a></li>
        <li><a href="#">Text</a></li>
    </ul>
</footer>

我当前的 CSS 是：

footer {
  position: fixed;
  bottom: 0px;
}

footer ul {
  padding: 0;
  margin: 0;
  list-style: none;
  display: table;
  width: 100%;
  table-layout: fixed;
}

footer ul li {
  margin: 0;
  display: table-cell;
  border-right: 1px solid #d1d2d4;
  border-left: 1px solid #d1d2d4;
  vertical-align: bottom;
  background-image: url('http://puu.sh/4ySYl.png');
  background-position: center bottom;
  background-repeat: no-repeat;
}

footer ul li:hover {
  height: 230px;
}

footer ul li:first-child {
  border-left: none;
}

footer ul li:last-child {
  border-right: none;
}

footer ul li a {
  text-decoration: none;
  display: block;
  height: 50px;
  line-height: 50px;
  background-color: #eee;
  padding: 0 40px;
}

Answer 1

约旦。在这种情况下，您应该对列表项使用 inline-block（而不是 table-cell）。这将允许您为每个单独的列表项设置动态高度。所以，而不是

footer ul li {
  display: table-cell;
}

你应该使用

footer ul li {
  display: inline-block;
}

所有其他样式和属性可以保持不变。

另外，我更新了您的fiddle。