Slide up one menu item with transition - html

Question

I am trying to create a menu that slides up on hover. My problem is that all the links slide up instead of just one at a time.
This is my html
<section id="content">
<div id="stuffhere">asd</div>
</section>
<div id="bottom">
<nav id="links">
hello
every
one
</nav>
</div>
and my css
body,html {
height: 100%;
}
#content {
background: #ccc;
height: 40%;
}
#bottom {
height: 60%;
background: #444;
}
#links {
display: table;
position: absolute;
bottom: 0;
right: 0;
border-spacing: 1em 0;
border-collapse: separate;
}
.mlink {
display: table-cell;
text-align: center;
font-size: 2em;
padding: 0.2em 0.6em;
background: #ccc url('http://images.sodahead.com/polls/004017497/230735835_Emotes_face_wink_icon_answer_1_small.png');
background-repeat: no-repeat;
background-position: 50% 54px;
transition: padding 0.2s linear, background-position 0.4s ease;
}
.mlink:hover {
padding-top: 2em;
background-position: 50% 10px;
}
And here is my fiddle: http://jsfiddle.net/HfX2M/
Any help appreciated :)

Answer 1

Like this?
Fiddle: http://jsfiddle.net/SinisterSystems/HfX2M/1/
.mlink {
display: inline;
When you have table-cell selected for your display property, it is assuming it is just that - a table cell in a table row. So when one expands, so do the rest.
Alternatively, you can also use inline-block to make them side by side, but maintain their block status for individual changes.
For more information on display properties, here is the W3 Standards Page for reference.
http://www.w3.org/wiki/CSS/Properties/display
If you want to maintain your padding (it is no longer assuming its a table so you have to make your own, use inline-block and an additional margin.
.mlink {
display: inline-block;
margin-left:.4em;
Fiddle: http://jsfiddle.net/SinisterSystems/HfX2M/3/**