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

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。