日期:2014-05-17  浏览次数:20666 次

IE6下UL被子栏目LI撑开的问题!
一级栏目LI固定宽度,二级栏目在UL中横向排列多个,宽度肯定比一级栏目要宽,这种情况在IE6以上的浏览器中会显示正常,但是在IE6中,一级栏目"mainlevel"会被撑到和二级栏目一样的宽度,导致各一级栏目这间分开N长,有什么办法解决吗?
<ul id="nav">  
  <li class="mainlevel" id="mainlevel_1"><a href="#" class="mainl">医院概况</a>
  <ul class="sub_nav_01">
  <li><a href="#">医院简介</a></li>
  <li><a href="#">医院荣誉</a></li>
  <li><a href="#">医疗设备</a></li>
  </ul>
  </li> 
</ul>

CSS code

#nav .mainlevel { width:92px; height:24px; float:left; text-align:center; display:block;}
#nav .mainlevel a { height:24px; color:#fff; font-weight:bold; text-decoration:none; text-align:center; display:block; }
#nav .mainlevel a:hover {color:#ffcc00; text-decoration:none; text-align:center; display:block;}
#nav .mainlevel ul { width:1000px; position:inherit; display:none; background:#000; padding:0px;}
#nav .mainlevel li { display:inline; width:86px; float:left; }
#nav .mainlevel li a{ line-height:24px; height:24px; font-weight:normal; }
#nav .mainlevel .sub_nav_01{ margin:0px; padding:0px; overflow:hidden}



------解决方案--------------------
<style type="text/css">
#nav{ 
width:100%; 
margin:0; 
padding:0; 
list-style:none; 
}
#nav li{ 
width:92px; 
height:24px; 
padding:0 5px; 
line-height:24px; 
float:left; 
overflow:hidden; text-align:center
}
#nav ul{ 
margin:0; 
padding:6px; 
list-style:none; 
display:block; 
position:absolute; 
background-color:#D2FFD2; 
border:solid 1px #690;
font-size:12px;
*top:40px;
*left:0;
/*display:none*/
}
#nav li ul li{
display:block; display:block; height:24px; clear:both;
}
</style>
<ul id="nav">
<li class="mainlevel" id="mainlevel_1">
<a href="#" class="mainl">医院概况</a>
<ul class="sub_nav_01">
<li><a href="#">医院简介</a></li>
<li><a href="#">医院荣誉</a></li>
<li><a href="#">医疗设备</a></li>
</ul>
</li> 
<li> <a href="#">links</a> </li>
<li> <a href="#">links</a> </li>
<li> <a href="#">links</a> </li>
<li> <a href="#">links</a> </li>
</ul>
------解决方案--------------------
探讨

<style type="text/css">
#nav{
width:100%;
margin:0;
padding:0;
list-style:none;
}
#nav li{
width:92px;
height:24px;
padding:0 5px;
line-height:24px;
float:left;
ov……