slideToggle() causes first li a to jump on click

Question

I've created very simple example, read many similar issues with slideToggle() but haven't been able to figure out the fix for it. How would I get rid of the jump on click of first li a when using slideToggle()? See it also in jsFiddle

HTML

<ul>
    <li><a href="#">Click</a></li>
    <li><a href="#">Second</a></li>
    <li><a href="#">Third</a></li>
    <li><a href="#">Fourth</a></li>
</ul>

CSS

 ul {
        background:#ddd;
    }

ul li {
    display:inline;
    background:lightyellow;
}

ul li:not(:first-child) {
    display:none;
    display:inline;
}

jQuery

$('ul li:first-child').on('click', function () {
  $('ul li:not(:first-child)').slideToggle();
  });

Answer 1

You need to vertically align your inline li elements, in this case to the top:

ul li {
  display: inline;
  vertical-align: top; // the important part
  background: lightyellow; 
}

Updated jsfiddle: http://jsfiddle.net/heznn9rm/5/ .

Read more about vertical-align property: MDN

Another (and I dare to say more common) way would be to float your li elements to the left - in this case you probably also will want to use CSS clearfix.

ul li {
  float: left;
  background: lightyellow;
}

+most basic clearfix on ul element containing floated lis:

ul:after {
  clear: both;
  content: "";
  display: block;
}

jsfiddle: http://jsfiddle.net/heznn9rm/6/ .