Question

I need my list item elements to bounce in place and not fall all over each other.

I created a JSFiddle of what I mean: http://jsfiddle.net/RGvjj/

Can someone advise me as to why the elements are doing that and what I need to do to fix that?

Answer 1

Try removing the inline display from the <li> and use float:left instead.

Try it out: http://jsfiddle.net/RGvjj/1/

#navigation li {
    font-size: 20px;
    margin-left: 10px;
    padding-left: 10px;
    border-left: 3px solid #1161A5;
    color: #ffffdd;
    text-decoration: none;
    float:left;
}

---

EDIT: To explain, I’m guessing this is happening because when you animate an element, jQuery changes the display to block. So you were ending up with a block element (the <a>) inside an inline element (the <li>) which doesn’t work.

By using float:left, the <li> retains its block display, which makes it valid for the <a> to be block.