您的位置:首页 > Web前端 > CSS

IE6 下:hover 中bug解决了(纯CSS)

2010-01-06 17:30 162 查看
这个bug,主要是一个二级菜单,在ie7中hover时正常显示出来,在ie6下没有效果。在网上找了很多资料,弄了好几天,最终是参照别人的代码,用的纯css经过自己的整理,就把它给弄下来了。希望以后自己多来看看。

如下:

-------------------

css代码:

.allMenu
{
width: 894px;
height: 22px;
line-height: 22px;
margin: 7px 3px 1px 3px;
background: url(images/menubg.GIF) repeat-x top left;
}
.allMenu .select
{
padding: 0px;
margin: 0px;
white-space: nowrap;
list-style-type: none;
}
.allMenu LI
{
height: auto;
padding: 0px;
float: left;
margin: 0px;
}
.allMenu .select A
{
height: 22px;
padding: 0 20px 0 20px;
display: block;
float: left;
color: Black;
line-height: 22px;
white-space: nowrap;
text-decoration: none;
}
.allMenu .select A:hover /* for ie6 */
{
cursor: pointer;
background: url(images/hoverbg.JPG) repeat-x top left;
}
.allMenu .select LI:hover A
{
cursor: pointer;
background: url(images/hoverbg.JPG) repeat-x top left;
}
.allMenu .select A:hover B /* for ie6,主要在ie6下样式有变化 */
{
cursor: pointer;
background: url(images/hoverbg.JPG) repeat-x top left;
display: block;
float: left;
}
.allMenu .select_sub {
display: none; /*不可见*/
}
.allMenu .sub
{
padding: 0px;
margin: 0px auto;
list-style-type: none;
}
.nav TABLE
{
font-size: 1em;
margin: -1px;
width: 0px;
border-collapse: collapse;
height: 0px;
}
.allMenu .select :hover .select_sub
{
width: 750px;
padding: 4px 0px 0px 0px;
margin-left: -100px;
white-space: nowrap;
text-align: center;
display: block;
background:url(images/subnavbg1jpg) repeat-x top left;
z-index: 100;
position: absolute;
top: 120px;
}
.allMenu .select :hover .sub LI A
{
margin: 0px;
float: left;
padding: 0 10px 0 10px;
border-width: 0;
display: block;
background: none transparent scroll repeat 0% 0%;
color: Black;
white-space: nowrap;
}
.allMenu .select :hover .sub LI A:hover
{
visibility: visible; /*可见*/
color: White;
}
.subMenuArea
{
width: 892px;
height: 22px;
border: 1px solid white;
background-color: Transparent;
display: block;
top: 122px;
left: 54px;
_left: 51px; /*for ie6*/
z-index: 99;
position: absolute;
}

-------------

html代码:

<div class="allMenu">
<ul class="select">
<li><a href="#"><b>首页</b> </a></li>
</ul>
<ul class="select">
<li><a href="#"><b>协调组</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
<ul class="sub">
<li><a href="#">组织体系</a></li>
<li><a href="#">管理体系</a></li>
<li><a href="#">成员注册</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul class="select">
<li><a href="#"><b>新闻频道</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
<ul class="sub">
<li><a href="#">冶金新闻</a></li>
<li><a href="#">市场新闻</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul class="select">
<li><a href="#"><b>技术动态</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
<ul class="sub">
<li><a href="#">冶金技术</a></li>
<li><a href="#">相关技术</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul class="select">
<li><a href="#"><b>供求信息</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
<ul class="sub">
<li><a href="#">技术贸易</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul class="select">
<li><a href="#"><b>书刊信息</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
<ul class="sub">
<li><a href="#">当月</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<ul class="select">
<li><a href="#"><b>企业团体</b><!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<div class="select_sub">
<ul class="sub">
<li><a href="#">技术等待</a></li>
<li><a href="#">放大易</a></li>
<li><a href="#">大</a></li>
<li><a href="#">放大</a></li>
<li><a href="#">技术贸易</a></li>
<li><a href="#">技术贸易</a></li>
</ul>
</div>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<asp:Label runat="server" ID="lblMenu"></asp:Label>
</div>
<div class="subMenuArea">
</div>
<%--此行主要是把二级的边框样式显示出来--%>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: