Question

I have a list with child elements like :

<ul>
    <li>.. </li>
    <li>
        <ul>
            <li>.. </li>
        </ul>
    </li>
    <li></li>
</ul>

<style> li {float: left; margin-left: 10px }  li ul {float: left} </style>

This is fine in Firefox, all the list elements being inline horizontally like I want.

LI LI LI LI LI

When I look in Chrome though those child elements are dropped below the main list elements like this :

LI     LI                LI
           LI     LI  

I tried display: inline on all of the elements but it made no difference.

What is the best cross browser way to create a horizontal row of list elements that have nested children like this?

Here is a fiddle : http://jsfiddle.net/thirtydot/7yufQ/1/

In Firefox the numbers are screwed up from the floats and Chrome shows them as in my example above.

Answer 1

<style> 
    ul{
      padding:0px;
      margin:0px;
      list-style-type:none;
      }
    li {float: left; margin-left: 10px }  
    li ul {float: left;} 
</style>

here is an example, works fine for me in Chrome as well

http://jsfiddle.net/corotchi/8BLck/