There are two nested lists:
<ul>
<li>First item
<ul>
<li> <a href="#">some item</a>
</li>
<li> <a href="#">some item</a>
<</li>
<li> <a href="#">some item</a>
</li>
</ul>
</li>
<li>Second item
<ul>
<li> <a href="#">some item</a>
</li>
<li> <a href="#">some item</a>
</li>
<li> <a href="#">some item</a>
</li>
</ul>
</li>
</ul>
I want the first level of my list to be horizontally aligned, and the second level to be vertically aligned.
I have tried using the following CSS:
ul > li {
display: inline-block;
}
However, this also applies to the second level (see fiddle). How can I achieve the desired effect?
Note: I also noticed that the bullet points disappear...