新手求救，，DIV+CSS导航条制作！
大家好，小弟再做一个导航条，遇到如下问题

目标网站的网页导航是这样的：



我用DIV+CSS 布局过后，样式是这样的，从下图可以看出导航的文字间距明显比目标网站的大很多。




如果把width调小一点却又放不下，如图



下面是HTML部分

    <div class="maindiv">

    	<div class="head">

                <div class="menu">

                  	<ul>

                    	<li>home</li>

                        <li>SPECIALS</li>

                        <li>ALL PRODUCTS</li>

                        <li>CONTACT US</li>

                        <li>ABOUT</li>

                        <li>BACK TO TUTORIAL</li>

                    </ul>

                </div>

            <div></div>

            <div></div>

        </div>

    </div>

</body>  

下面是CSS部分

body{ background:url(../images/body-bg.jpg) fixed}





.maindiv{ width:1000px;

			height:1200px;

			margin:0 auto}



.head{ width:1000px;

		height:210px;

		margin:25px auto 0px}

		

.menu{ width:1000px;

		height:30px;

		background:#060;

		color:#FFF;

		text-align:left}

		

.menu ul { width:1000px;

			height:30px;}

			

.menu ul li{font-size:11px;

		line-height:35px;

		text-transform:uppercase;

		text-align:left;

		width:100px;

		font-weight:bolder;

		float:left;

		list-style:none;}

请问如何才能实现导航条像目标网站那样 ，请高手指点，非常感谢！！！！