I am facing an issue with my ul list where adding a nested ul causes the li items above to move. Can anyone explain why this is happening and suggest a solution?
Here is an example: http://jsfiddle.net/y5DtE/
HTML:
<ul>
<li> first
<ul>
<li> 1.2 </li>
</ul>
</li>
<li> second </li>
<li> third eally, really long </li>
</ul>
CSS:
body {
margin:0px;
}
ul {
margin:40px auto;
list-style-type:none;
padding:0;
text-align: center;
}
ul li {
padding: 0 15px;
margin-right: 5px;
background-color: #f2f2f2;
display: inline-block;
height: 30px;
line-height: 30px;
font-family: verdana;
font-size:10px;
color: #666
}
ul li:last-child { margin-right: 0px; }
ul li ul {
margin:5px 0;
}