How to stop this annoying css behavior

Question

Here is the jsfiddle link: http://jsfiddle.net/qrzwD/

I just don't like it when my second li moves up after the animation is complete.

can someone help me stop this.

here is my html:

<nav> <ul> <li> <a class="content-box-blue" href="#"> </a> </li> <li> <a class="content-box-gray" href="#"> </a> </li> </ul> </nav> 

here is my css:

 * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } a { text-decoration: none; margin: 0; padding: 0; } ul, li, nav { margin: 0; padding: 0; } nav { float: right; width: 400px; margin-top: 35px; margin-right: 10px; } nav ul { list-style-type: none; float: right; } nav li { float: right; clear: right; margin-bottom: 20px; } .content-box-blue { background-color: #00bfff; border: 1px solid #afcde3; height: 50px; width: 0px; border-top-left-radius: 8% 50%; border-bottom-left-radius: 8% 50%; text-align:center; line-height:50px; } .content-box-gray { background-color: #FF69B4; border: 1px solid #bdbdbd; height: 50px; width: 0px; border-top-left-radius: 12% 50%; border-bottom-left-radius: 12% 50%; text-align:center; line-height:50px; } 

here is my jquery code:

 $(function(){ $(".content-box-blue").animate({width:'350px'},1200,function(){$('<span>Charcoal Paintings</span>').fadeIn(1000).appendTo($(this));}); $(".content-box-gray").animate({width:'250px'},1200,function(){$('<span>Sketches</span>').fadeIn(2000).appendTo($(this));}); }); 

Answer 1

Set the height on LI instead of A:

 li {height:50px;} 

http://jsfiddle.net/qrzwD/3/

The newly added A makes LI a change in overall height.

Answer 2

This can be solved by setting display:block for both .content-box-blue and .content-box-gray

the violin is here

Answer 3

You can solve this by adding a static height: 50px li elements to your general nav li selector in addition to the a-selector.

I cannot, however, explain why he behaves in this way.

Answer 4

Try

 nav li a{ display:block; } 

link here http://jsfiddle.net/qrzwD/4/