Link to code: http://codepen.io/danessh/debug/uCBds
The desired effect is to have any added item to be appended to the menu with rounded corners. That part seems to work, but the CSS does not seem to work as I expected.
Issue:
The margin for any item added after the first overlaps instead of appearing like the last added item. I can see this because there is opacity set.
Question:
What is the possible cause of the first item being styled by CSS and all other items added in the same manner not displaying all the styling declarations?
Note: Items are being appended to $('#menu ul'); object. When I appended an item using $('li:last');, the first item displayed overlaps other menu items. margin: -2px; is set for the existing menu items so that no gaps appear.
The 2px spaces are actually coming from your markup (there are a bunch of articles on this). If you remove the whitespace between your <li> elements, the spaces will go away. This is a side effect of making your <li> elements inline.
The dynamically-created elements don't have this problem, so you're shifting them over 2px too far. To fix it, remove the negative margin completely and either remove the whitespace or float them to the left.