在线急等 ,帮忙看看下面样式该如何实现


<ul>
            <li class="left"><a href="#">NEWS</a>
                <ul id="child">
                    <li class="left"><a href="#">us news</a></li>
                    <li class="left"><a href="#">worlds news</a></li>
                    <li class="left"><a href="#">policits</a></li>
                    <li class="left"><a href="#">'today'</a></li>
                    <li class="left"><a href="#">teach&science</a></li>
                    <li class="left"><a href="#">powerwall</a></li>
                    <li class="left"><a href="#">heaths news</a></li>
                </ul>
            </li>
            <li class="left"><a href="#">ENTERTAINMENT</a> </li>
            <li class="left"><a href="#">SPORTS</a></li>
            <li class="left"><a href="#">MONEY</a></li>
            <li class="left"><a href="#">LIFESTYLE</a></li>
            <li class="left"><a href="#">LOCAL</a></li>
            <li class="left"><a href="#">AUTOS</a></li>
            <li class="left"><a href="#">BACK TO SCHOOL</a></li>
            <li class="left"><a href="#">MORE</a></li>
        </ul>
.left
{
float:left
}
最终实现MSN 首页上的那个导航条的功能
http://www.msn.com/?st=1主要问题:
   <ul id="child">
                    <li class="left"><a href="#">us news</a></li>
                    <li class="left"><a href="#">worlds news</a></li>
                    <li class="left"><a href="#">policits</a></li>
                    <li class="left"><a href="#">'today'</a></li>
                    <li class="left"><a href="#">teach&science</a></li>
                    <li class="left"><a href="#">powerwall</a></li>
                    <li class="left"><a href="#">heaths news</a></li>
                </ul>
如何能出现在 news 导航条的 下面， 而不是挤占 NEWS 的空间