尽可能简洁的用CSS写一个漂亮的横向菜单

      网页布局经常要用到DIV+CSS，CSS虽然不难，但是要精通也没有那么容易，为了学点CSS，我也做了一个菜单，拿出来献丑。

做的时候有个疑问，为什么去掉position:absolute;背景色就不会横向100%撑满，请拍砖指教。

效果图：

CSS部分：

ul{
		padding:0px;  
		background:url(button1_bg.jpg) repeat-x; width:100%; position:absolute; 
	}
	ul li{
	    list-style:none; 
		background:url(button1.jpg) repeat-x;
	    float:left;
		text-align:center;
		width:80px; 
		height:32px;
		font-size:12px;
	}
	
	ul li a{ 
		display:block;  /*区块显示，横向撑满整个li*/
		color:#000;
		text-decoration:none; 
		padding:9px 0px 10px 0px;
	}
	
	ul li a:hover{ 
		background:url(button2.jpg) no-repeat; 
		color:#FFF;  
	}
      

HTML部分：

<ul>
	<li><a href="#">首页导读</a></li>
    <li><a href="#">首页导读</a></li>
    <li><a href="#">首页导读</a></li>
    <li><a href="#">首页导读</a></li>
    <li><a href="#">首页导读</a></li>
    <li><a href="#">首页导读</a></li>
    <li><a href="#">首页导读</a></li>
    
</ul>  
      

链接下载