css transitions pushing elements - html

Question

i am trying to make a new menu for my site and i'm using transitions on highlight.
but i am getting some issues with elements being pushed around. for example if you highlight Home it will push all elements to right of it.
however if there are 2 lines it will not push the element down. instead it will just mask it. how can i make sure each element has it's own dedicated space and not be pushed and also not be masked.
I tried making an absolute with an inner relative but that didn't work.
http://jsfiddle.net/yg68cnnt/
Html:
<ul>
<li> Home </li>
<li> About </li>
<li> FAQ </li>
<li> Locations </li>
<li> StackOverflow </li>
</ul>
CSS:
ul{
list-style-type:none;
position:absolute;
}
li{
display:inline;
transition: all 2s;
width:0px;
position:relative;
margin-right:3em;
padding-top:10px;
padding-right:30px;
padding-left:4px;
}
li:hover{
background-color:red;
border-right:20px solid black;
border-bottom:20px solid black;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
}

Answer 1

If you want the border to grow, you can trick it by using css3 box-shadow with blur set to 0 instead of using border, because shadow does not cause the element itself to grow.
li:hover{
background-color:red;
box-shadow: 10px 10px 0 10px black;
border-bottom-right-radius:10px;
border-top-left-radius:10px;
}
(Note that it is probably a hack and not the most correct way to solve your problem. It sort of works though.)
Vertical space between items can be achieved by setting display to inline-block and setting margin-bottom:
li{
display:inline-block;
margin-bottom:2em;
transition: all 2s;
position:relative;
margin-right:3em;
padding-top:10px;
padding-right:30px;
padding-left:4px;
}
updated jsFiddle

Answer 2

You could set a transparent border on the non-hover state like this:
li {
display:inline;
transition: all 2s;
width:0px;
position:relative;
margin-right:3em;
padding-top:10px;
padding-right:30px;
padding-left:4px;
border-right:20px solid transparent;
border-bottom:20px solid transparent;
}
jsFiddle example