以下是代码片段：

      晚上用div输出一个水平方向二级菜单的效果，遇到了一个令人非常纳闷的问题。基本把整个菜单的效果做好了，在FF下测试通过。很习惯的打开IETEST测试IE6、IE7、IE8下看看有什么问题。结果是IE6下随着二级菜单的出现被撑开了，而IE7、IE8下也都还正常。认真分析了代码也没什么不对呀？主要思路是先设置二级菜单display:none;,然后通过主菜单的onmouseover\onmouseout事件分别设置二级菜单的显示与隐藏。只是在CSS里用了个position:relative;确保二级菜单会跟着一级菜单的位置变化而变化。对于相对位置，IE6里只要子元素的属性是显示状态，那就得占用一定的位置。而不管子元素在什么位置显示。想了很久终于想到了一个hack css方法。固定主菜单的高度，然后来个overflow:hidden;。在其它浏览器下则保持原来的状态。

页面中的HTML代码如下：

<div class="menu">
<ul>
<li class="menu_bg1" id="category_001" onmouseover="ShowCateArea(this.id)"
onmouseout="HiddenCateArea(this.id)">
<a href="#">精品女戒&nbsp;Women&#39;s Rings</a>
<div class="category_area" id="category_001_area">
<div class="area_bg"><a href="#">菜单一1-1-1</a></div>
<div class="area_bg"><a href="#">菜单一1-1-2</a></div>
<div class="area_bg"><a href="#">菜单一1-1-3</a></div>
</div>
</li>
<li class="menu_bg1" id="category_002" onmouseover="ShowCateArea(this.id)"
onmouseout="HiddenCateArea(this.id)">
<a href="#">时尚男戒&nbsp;Men&#39;s Rings</a>
<div class="category_area" id="category_002_area">
<div class="area_bg"><a href="#">菜单二1-1-1</a></div>
<div class="area_bg"><a href="#">菜单二1-1-2</a></div>
<div class="area_bg"><a href="#">菜单二1-1-3</a></div>
</div>
</li>
<li class="menu_bg1" id="category_003" onmouseover="ShowCateArea(this.id)"
onmouseout="HiddenCateArea(this.id)">
<a href="#">情侣对戒&nbsp;Couple Rings</a>
<div class="category_area" id="category_003_area">
<div class="area_bg"><a href="#">菜单三1-1-1</a></div>
<div class="area_bg"><a href="#">菜单三1-1-2</a></div>
<div class="area_bg"><a href="#">菜单三1-1-3</a></div>
</div>
</li>
<li class="menu_bg1" id="category_004" onmouseover="ShowCateArea(this.id)"
onmouseout="HiddenCateArea(this.id)">
<a href="#">钻石吊坠&nbsp;Diamond Pendants</a>
</li>
<li class="menu_bg1" id="category_005" onmouseover="ShowCateArea(this.id)"
onmouseout="HiddenCateArea(this.id)">
<a href="#">耳环耳钉&nbsp;Earrings</a>
</li>
<li class="menu_bg1" id="category_006" onmouseover="ShowCateArea(this.id)"
onmouseout="HiddenCateArea(this.id)">
<a href="#">手链手镯&nbsp;Bracelets</a>
</li>
<li class="menu_bg1" id="category_007" onmouseover="ShowCateArea(this.id)"
onmouseout="HiddenCateArea(this.id)">
<a href="#">项链套链&nbsp;Necklace</a>
</li>
<li class="menu_bg1" id="category_008" onmouseover="ShowCateArea(this.id)"
onmouseout="HiddenCateArea(this.id)">
<a href="#">豪华款式&nbsp;Luxury Style</a>
</li>
<li class="menu_bg1" id="category_009" onmouseover="ShowCateArea(this.id)"
onmouseout="HiddenCateArea(this.id)">
<a href="#">情侣对戒&nbsp;Couple Rings</a>
</li>
</ul>
</div>
下面是JS代码：

// JavaScript Document
function ShowCateArea(id){
var obj = document.getElementById(id + "_area");
var objli = document.getElementById(id);

if(obj){
obj.style.display = "block";
objli.className = "menu_bg2";
}
}

function HiddenCateArea(id){
var obj = document.getElementById(id + "_area");
var objli = document.getElementById(id);

if(obj){
obj.style.display = "none";
objli.className = "menu_bg1";
}
}

以下是css代码：

/* 栏目菜单css样式开始 */
.menu{
padding-left:5px;
}
.menu li{
width:94%;
float:left;
height:28px;
line-height:28px;
padding-left:10px;
margin-top:5px;
}
.menu_bg1 a{
color:#D51046;
}
.menu_bg2 a:link, .menu_bg2 a:visited, .menu_bg2 a:hover, .menu_bg2 a:active{
color:#FFFFFF;
}

.menu_bg1{
height:28px;
background:url(zhenai/Images/category_bg01.jpg) no-repeat;
}
.menu_bg2{
height:28px;
overflow:inherit;!important;/* 这里为了解决IE6不兼容的问题position:relative;会撑页面 */
_overflow:hidden;
background:url(zhenai/Images/category_bg02.jpg) no-repeat;
}
.category_area{
border-right:1px #FDD3DF solid;
border-top:1px #FDD3DF solid;
display:none;
z-index:99999;
left:190px;
width:172px;
line-height:28px;
position:relative;
top:-30px;
background:#F8F8F8;
height:auto;!important;
_height:-300px;
}
.area_bg{
padding:0px 10px 0px 10px;
border-bottom:1px #FDD3DF solid;
}
.area_bg a:link, .area_bg a:visited, .area_bg a:hover, .area_bg a:active{
color:#D51046;
}

/* 栏目菜单css样式结束 */

解决问题的关键是以下的代码

.menu_bg2{
height:28px;
overflow:inherit;!important;/* 这里为了解决IE6不兼容的问题position:relative;会撑页面 */
_overflow:hidden;
background:url(zhenai/Images/category_bg02.jpg) no-repeat;
}

其实现在做网页设计最大的难题就是解决浏览器兼容的问题，像一些文章说的hack css搞得特别的复杂。让人越看越晕。在输出代码的过程中我们只要遵守一个原则就能避免这样的问题出现。记得可以不用默认值的地方不用使用默认值。默认值是产生浏览器兼容性问题的罪魁祸首。以下是我无奈下才用方法，很简单的！

例如：
height:100px;!important;/* 这是FF及IE7 IE8所支持的 */
_height:90px;/* 这里只有IE6起效 */

呵呵，IE6以下的浏览器现在都懒得测试了。毕竟测试好主流的比较新的浏览器那就可以了，要是一个页面把所有的浏览器的的兼容性都考虑好了。我只能说那太牛了，但这样的效率和花费的时间是不值得的。

或许这不算是个很深奥的问题，既然遇到了那就顺手记录下来。不过在输过那么多网页后都一直没有发现这个问题，所以本人觉得很有必要写篇简短的帮助文章方便记忆！也希望对遇到同样问题的朋友有些帮助！