Aligning <li> next to each other, not working

Question

I have a problem with aligment of two li elements inside a div because in the next example

HTML

<div id="menu-container">
    <div class="menu-left">
        <ul id="menu-principal" class="menu">
            <li><a href="">Hola</a></li>
            <li><a href="">Hola2</a></li>
        </ul>
    </div>
<!-- More code -->
</div>

The CSS code is in the next link and I use that html structure because that is what is generated by placing a menu in wordpress.

http://jsfiddle.net/Soldier/KhLhR/1/

I have a simple code with two li elements and I want to align horizontally with 50% of width for each but doesn't work.

Edit

Well.. All responses involve float: left, but did not want to use float: left because this causes overflow to ul and I have to use overflow: hidden .. I thought there was another factor that was failing but they all give +1 and accept the answer that answered first.

Thanks

Answer 1

Add a left float to your li elements:

.menu-left ul li {
    display:inline-block;
    vertical-align: top;
    width: 50%;
    float: left;
}