ul li 变成块状选项卡

<style type="text/css">
.menu1{ border:1px solid #CCCCCC; height:40px;}
.menu1 ul { margin:0px; list-style:none; padding:0px;}
.menu1 ul li{ float:left; height:40px; line-height:40px;text-align:center; background:#F3F3F3; margin-right:2px;}
.menu1 ul li a{ display: inline-block; text-decoration:none ; font-size:12px; padding:0px 10px;}
.menu1 ul li a:hover{ background:#CC0000; color:#FFFFFF }
.menu2{ border:1px solid #CCCCCC; height:40px;}
.menu2 ul { margin:0px; list-style:none; padding:0px;}
.menu2 ul li{ float:left; height:40px; line-height:40px; width:150px; text-align:center; background:#F3F3F3; margin-right:2px;}
.menu2 ul li a{ display:block; text-decoration:none ; font-size:12px ;  line-height:40px; width:150px;}
.menu2 ul li a:hover{ background:#CC0000; color:#FFFFFF }
</style>
<p>菜单一不固定宽度</p>
<div class="menu1">
  <ul>
    <li><a href="#">导航菜单</a></li>
    <li><a href="#">导航菜单</a></li>
    <li><a href="#">导航比较长菜单文字多</a></li>
    <li><a href="#">导航比较长菜单</a></li>
  </ul>
</div>
<p>&nbsp;</p>
<p>菜单二固定宽度</p>
<div class="menu2">
  <ul>
    <li><a href="#">导航菜单</a></li>
    <li><a href="#">导航菜单</a></li>
    <li><a href="#">导航比较长菜单文字多</a></li>
    <li><a href="#">导航比较长菜单</a></li>
  </ul>
</div>

                                By:lsfhack        Email：lsfhack@163.com