CSS导航条想用百分比怎么用

Question

/* CSS Document */
#top { height:30px;}
body,html { margin:0;
            padding:0;
width:100%; 
height:100%}
#layout { margin:0px auto;
          width:795px;}
/*===============================导航==============================*/
/*定义总体宽度、高度；background:url(images/img_headerbg.jpg);; 控制背景颜色,居中对齐*/
/*控制一级菜单行高*/
#nav{
    position:absolute;
    line-height: 23px;
+line-height:25px;
list-style-type: none; 
}/*=======================一级目录======================*/    
/* 一级菜左对齐 */
#nav li{
    float: left;
}/*一级菜单链接总体样式：每个菜单的宽，居中对齐，文字大小*/
#nav a{ 
display:block;
width:140px;//我想把这个改为百分比
    height:25px;
+heithg:30px;
text-align:center;  
font-size:12px;
color:#000;
font-weight:bold;
text-decoration:none;
background:url(../images/bg_nav_2.jpg);
padding-top:3px;
} /* 鼠标在链接上 */   
#nav a:hover{
    color:#000;
text-decoration:none;
background:url(../images/bg_nav.jpg);
font-weight:bold;
}             
/*=========================二级目录========================*/
/*二级菜单总体样式：行高24px；背景颜色；外框宽度；相对位置；
 *边框一个象素，上边没样式，左右下边实线，边框颜色#D9C7DA；内边距1个象素
 */ 
 
#nav li ul{
    line-height: 24px;
list-style-type: none;
text-align:left;
left: -999em; 
width:156px;
+width:152px;
position: absolute;
    border:1px solid #666;
}
/*二级菜单链接样式；背景宽度、左对齐，左缩进2*/
#nav li ul a{
    display:block;
width:156px; 
text-align:left;
color:#000; 
text-decoration:none;
    background:#f2f2f2;}
/*鼠标在链接上*/                               
#nav li ul a:hover{
    color:#FFF;
text-decoration:none;
font-weight:normal;
background:#4AB0E3;
font-weight:bold;
} 
/*==========================================================*/#nav li:hover ul{
    left: auto;
}#nav li.sfhover ul{
    left: auto;
}#content{
    clear: left;
}/*====导航结束======*/
想把一级菜单改为百分比,如果改啊,我试过15%但是都是失败..
是不是需要计算当前的宽度

Answer 1

<div id="top" width="85%">
<UL id="nav">
<LI>
<a>条款查看</a>
<UL>
<LI>
<a href="">条款1</a>
</LI>
<LI>
<a href=">条款2</a>
</LI>
</UL>
</LI>
<LI>
<a>有问有答</a>
<UL>
<LI>
<a href="">·关于系统</a>
</LI>
<LI>
<a href="">·有问有答</a>
</LI>
</UL>
</LI>
<LI>
<a>系统管理</a>
<UL>
<LI>
<a href="">·修改密码</a>
</LI>
<LI>
<a href="">·设置</a>
</LI>
</UL>
</LI>
</UL>
</div>这是我的导航信息

Answer 2

你要设 li 的宽度，不是<a>的，因为<a>的宽度以父元素<li>为基础，<li>以<ul>为基础。你的<li>左浮动的话，不设定宽度则会被压缩