Correct Nesting Of UL, OL, LI Elements

I'm looking for opinion/facts/arguments on the correct nesting of UL,
OL, & LI elements.

For example, this is what I want (unordered list):

* Item 1
* Item 2
* Item 3
* Item 3a
* Item 3b
* Item 3c
* Item 4

Now, in my markup, I can do (A) or (B), and they both work.

<!-- Markup (A) -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<ul>
<li>Item 3a</li>
<li>Item 3b</li>
<li>Item 3c</li>
</ul>
<li>Item 4</li>
</ul>


<!-- Markup (B) -->
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>Item 3a</li>
<li>Item 3b</li>
<li>Item 3c</li>
</ul>
</li>
<li>Item 4</li>
</ul>


Now, I prefer, and think that Markup A, is the better representation
of the data... but... I can't find a spec, that dictates which one is
"officially" correct... (due in part to the fact that in old HTML
days, the closing tags were not needed... thus the confusion as to
"where" that closing tag goes, when nesting)

This gets very interesting in the JS/CSS world, trying to deal with
this...

If I generate Markup A, then get a reference to the LI element for
"Item 3", called say... foo then I ask for foo.followingSibling, in
Mozilla, I get as expected, the UL element, but in IE, I get the LI
for "Item 4"... IE "moves" the UL node, to the .lastChild position of
the preceding LI element.

So, here's the questions...

1.) Which method (by vote, spec or whatever) is correct/better?
Method A or B?

2.) Based on (1), is the IE implementation a Bug, or a Feature?
Mozilla's?

3.) If you want to style the sub items, what CSS would you use for
Method A, or B... or does it matter?

PS I don't expect a unanimous answer to any of these, I'm just trying
to get a feel for how everyone else interprets how Nested Lists are
"supposed" to work.