Change height of a list item without affecting other list items

Question

I have a footer that contains nothing but an unordered list which looks like this:

I'm trying to create a hover state which looks like this:

So when you hover over a list item, it expands upwards and reveals an image below.

Everything I've tried so far to achieve this causes all list items to expand in height when one list item does; I can't seem to get the hovered list item to expand in height without affecting all the others as well. I'm also having trouble figuring out how to get the "Text" part of the list item to stay at the top of the list item in the hover state.

EDIT: Please note that the number of list items is dynamic, and the site is responsive. I need the list items to always fill out the full width of the browser window (regardless of how wide the window is, and how many list items there are). I'm using display: table and table-layout: fixed on the unordered list and display: table-cell on the list items to achieve this.

I also need for the a to fill the entire list item, so that clicking on the image or on the text area will take the user to the a href="..." location.

Here's a jsFiddle with my current HTML and CSS: http://jsfiddle.net/tsfMD/

My current HTML is:

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

My current CSS is:

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

Jordan. In this case you should use inline-block (not table-cell) for your list items. This will allow you to have dynamic height for each separate list item. So, instead of

footer ul li {
  display: table-cell;
}

you should use

footer ul li {
  display: inline-block;
}

All other styles and properties can stay the same.

Also, I've updated your fiddle.