Font size change making li elements jump

Question

I have been trying to fix an issue I am experiencing with my sites navigation bar. I want to animate the text to increase in size when hovered over, but want it to be a smooth transition and not just jump in size hence the jQuery approach as opposed to adjusting the li:hover.

The issue that I'm having is the jQuery function makes the List Item "jump" when hovered over. Is there a simple solution or a different approach that I am overlooking to achieve this?

$(document).ready(function(){

 $('.nav li').hover(function() {
      $(this).stop().animate({ fontSize : '30px'}, 200);
 },
 function() {
      $(this).stop().animate({ fontSize : '26px'}, 200);
 });

});

.nav {
 background-color: #333;
  height: 50px;
  line-height: 50px;
}

.nav li {
  font-family: 'Impact';
 width: 15%;
 color: #EB1B1B;
 display: inline-block;
 font-size: 26px;
  position: relative;
}

.nav li:hover {
 color: #fefd05;
}

.sitemap {
    margin-top: 10px;
    margin-bottom: 10px;
    text-align: center;
}

.fixed {
  width: 100%;
 position: fixed;
 top: 0;
  background-color: #333;
  z-index: 1;
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<div class="nav">
 <ul class="sitemap">
  <a href="one.html"><li>One</li></a>
  <a href="two.html"><li>Two</li></a>
  <a href="three.html"><li>Three</li></a>
  <a href="four.html"><li>Four</li></a>
  <a href="five.html"><li>Five</li></a>
 </ul>
</div>

Example Fiddle here.

Answer 1

Adding a vertical-align: bottom rule to the <li> elements should fix your problem.