css - 在不影响其他列表项的情况下更改列表项的高度

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

乔丹。在这种情况下，您应该为列表项使用内联 block (而不是表格单元格)。这将允许您为每个单独的列表项设置动态高度。所以，而不是

footer ul li {
  display: table-cell;
}

你应该使用

footer ul li {
  display: inline-block;
}

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

另外，我已经更新了你的 fiddle .