<html>
<head>
<style type="text/css">
body{
background-color:white
font-size:12px
font-family:Arial, Helvetica, sans-serif
margin:0px
padding:0px
color:white
}
ul,li{
margin:0px
padding:0px
}
li{
display:inline
list-style:none
list-style-position:outside
text-align:center
font-weight:bold
float:left
}
a:link{
color:#336601
text-decoration:none
float:left
width:100px
padding:3px 5px 0px 5px
}
a:visited{
color:#336601
text-decoration:none
float:left
padding:3px 5px 0px 5px
width:100px
}
a:hover{
color:white
float:left
padding:3px 3px 0px 20px
width:88px
text-decoration:none
background-color:#539D26
}
a:active{
color:white
float:left
padding:3px 3px 0px 20px
width:88px
text-decoration:none
background-color:#BD06B4
}
#nav{
width:600px
height:30px
border-bottom:0px
padding:0px 5px
position:absolute
z-index:1
left: 198px
top: 25px
}
.list{
line-height:20px
text-align:left
padding:4px
font-weight:normal
}
.menu1{
width:120px
height:auto
margin:6px 4px 0px 0px
border:1px solid #9CDD75
background-color:#F1FBEC
color:#336601
padding:6px 0px 0px 0px
cursor:hand
overflow-y:hidden
filter:Alpha(opacity=70)
-moz-opacity:0.7
}
.menu2{
width:120px
height:20px
line-height:20px
margin:6px 4px 0px 0px
background-color:#F5F5F5
color:#999999
border:1px solid #EEE8DD
overflow-y:hidden
cursor:hand
}
</style>
</head>
<body>
<div id="nav">
<ul>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">首页
<div class="list">
<a href="#">首页</a><br />
<a href="#">社区</a><br />
<a href="#">日志</a><br />
<a href="#">生活</a><br />
<a href="#">论坛</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">社区
<div class="list">
<a href="#">首页</a><br />
<a href="#">社区</a><br />
<a href="#">日志</a><br />
<a href="#">生活</a><br />
<a href="#">论坛</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">生活
<div class="list">
<a href="#">首页</a><br />
<a href="#">社区</a><br />
<a href="#">日志</a><br />
<a href="#">生活</a><br />
<a href="#">论坛</a><br />
</div>
</li>
<li class="menu2" onMouseOver="this.className='menu1'" onMouseOut="this.className='menu2'">论坛
<div class="list">
<a href="#">首页</a><br />
<a href="#">社区</a><br />
<a href="#">日志</a><br />
<a href="#">生活</a><br />
<a href="#">论坛</a><br />
</div>
</li>
</ul>
</div>
</body>
</html>
这是因为IE很多方面并没有按html和css的标准来做，它是想搞一套自己的标准，结果证明是失败的，因此IE（主要是指IE8-）不是标准浏览器，很多html5和css3的效果无法在IE中呈现出来。从IE9开始，微软也慢慢回到标准的轨道上来了，到了IE11就是完全的标准浏览器了。
IE8现在还没有很好的解决兼容性的办法，但是IE8有一个方式是可以降低到IE7版本浏览。就是在每个以完成的页面源码中添加这句话：<meta http-equiv="X-UA-Compatible" content="IE=7" />这样，我们做好的成品页面即使在IE8中测试不兼容，加上上面那段代码，就可以把IE8的兼容性视图降低至IE7，一切就正常啦！以下是css兼容IE6、IE7和FF的方法：区分IE6，IE7，firefox区别不同浏览器，CSS hack写法：
区别IE6与FF：
background:orange*background:blue
区别IE6与IE7：
background:green !importantbackground:blue
区别IE7与FF：
background:orange*background:green
区别FF，IE7，IE6：
background:orange*background:green_background:blue
background:orange*background:green !important*background:blue
注：IE都能识别*标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important,
IE7能识别*，也能识别!important
FF不能识别*，但能识别!important
