[WSG] Horizontal List problem in IE

[JW]

Hi

I am having problem with my horizontal list IE as 'Child A-D li' is showing
at the bottom of 'Daddy li'. It looks fine in Firefox and Opera 7. They are
all floated to the left in a straight line.

<ul>
<li>Daddy &raquo;</li>
        <ul>
        <li><a href="#">Child A</a>&nbsp; |</li>
        <li><a href="#"> Child B</a>&nbsp; |</li>
        <li><a href="#"> Child C</a>&nbsp; |</li>
        <li><a href="#"> Child D</a>&nbsp; |</li>
        </ul>
</ul>


CSS as follow:

#menuSub 
        {
        font-family                     : Verdana, Helvetica, Arial,
sans-serif, Geneva;
        color                           : #D6D7C8;
        font-size                       : 12px;
        font-weight                     : bold;
        clear                           : both;
        padding                 : 12px 10px 0px 7px;
        }

#menuSub ul {display: inline; margin: 0; padding: 0;}

#menuSub li {padding-right: 10px; float: left;} 

#menuSub li a {color: #A5A682;  text-decoration: none;}

#menuSub li a:hover, #menuSub li a#menuSub-selected {color: #C2AC52;}


The final effect should show as:

Daddy >> Child A | Child B | Child C | Child D

And not:

Daddy >> 
Child A | Child B | Child C | Child D



Best Wishes, 
Jaime .......





*****************************************************
The discussion list for http://webstandardsgroup.org/
See http://webstandardsgroup.org/mail/guidelines.cfm
for some hints on posting to the list & getting help
*****************************************************