css - Horizontal list with nested lists that display vertically -

i'd display following:

 <ul class="parent">     <li>a         <ul class="child">             <li>a1</li>             <li>a2</li>             <li>a3</li>         </ul>     </li>     <li>b         <ul class="child">             <li>b1</li>             <li>b2</li>             <li>b3</li>         </ul>     </li> </ul> 

like this:

*a        *b   *a1       *b1   *a2       *b2   *a3       *b3 

i've tried few variations of using inline , float, can't find way child menus expand vertically , line right using css.

html (fixed)

<ul class="parent">     <li>a         <ul class="child">             <li>a1</li>             <li>a2</li>             <li>a3</li>         </ul>     </li>     <li>b         <ul class="child">             <li>b1</li>             <li>b2</li>             <li>b3</li>         </ul>     </li> </ul> 

css

.parent > li {     float: left;     width: 100px;   }  .child > li {     padding-left: 20px; /* not needed if don't reset css */ }