make list items get next to each other - html

Question

I have a menu with sub menus. I used nested uls to achive this. Now I'm facing this situation: I want all the items and subitems to be displayed horizontally at their respective level. The problem is that when an parent list has a children list, it's width grows so the next item at the same level goes far to the right.
To have things more clear here's a fiddle of what I'm taking about: http://jsfiddle.net/matias/n8gFT/
As you can see I would like to have the items B and C placed where the green dashed spaces are.
Is it possible to do this?
I would like to keep using nested uls and display: inline-block for itemes instead of float: left
SAMPLE HTML:
<ul>
<li>ITEM A
<ul>
<li>sub item A1</li>
<li>sub item A2</li>
</ul>
</li>
<li>ITEM B</li>
<li>ITEM C</li>
</ul>
SAMPLE CSS:
ul{border: 1px solid red; padding: 10px;}
li{display: inline-block; border: 1px solid blue; margin: 5px; padding: 10px; vertical-align: top;}
span{border: 1px dashed lime; margin: 0 10px; padding: 5px;}
EDIT 1: I forgot to tell you this: A, B and C have children. If I click on B, it's children are shown and A's and C's are hidden...and so on....

Answer 1

We will start off with a little CSS
#menu > li.sub ul {
list-style: none;
position: absolute;
top: -1000em;
left: 0px;
}
#menu li.sub ul li a {
display: inline;
}
#menu > li.sub:hover ul {
top: 3em;
}
#menu{
text-align:left;
}
li{
display:inline-block;
}
Finish with some HTML
<ul id="menu" >
<li class="sub">
ITEM A
<ul>
<li>sub A1</li>
<li>sub A2</li>
</ul>
</li>
<li class="sub">
ITEM B
<ul>
<li>sub B1</li>
<li>sub B2</li>
</ul>
</li>
<li class="sub">
ITEM C
<ul>
<li>sub C1</li>
<li>sub C2</li>
</ul>
</li>
</ul>
and a JSFIDDLE http://jsfiddle.net/ShADm/28/

Answer 2

You could style the lists that are being pushed over of margin-left: -20px; here is a working fiddle
http://jsfiddle.net/n8gFT/1/
Of course the amount it is pushed over can be edited by changing the margin-left

Answer 3

I achieved what I was looking for using display: table-cell to the li's and reducing ul's width.
See demo

Answer 4

Add a class to the sub lists and style them like this:
.sub { position: absolute; margin-left: -27px; }