奇怪的子选择器行为

好吧,我终于决定放弃IE6了。太棒了。这个决定带来的第一大好处是选择孩子。因此,我第一次开始使用它们来创建嵌套的下拉菜单,并期望它会很轻松。但是。。。代码如下:

<style>
body {
    color:#000;
}

ul.top > li {
    color:red;
}

<ul class="top">
    <li>top li</li>
    <li>
        <ul class="sub">
           <li>sub li</li>
        <li>sub li</li>
        </ul>
    </li>
</ul>

.top 无序的列表是红色的,其余的都是黑色的。这不符合逻辑吗?但实际上它们都变红了。。。