我做了Css的下拉菜单,不兼容ie6求各位大哥大姐帮助,急需解决! 5
css代码/**nav**/#nav{background:url(images/nav_off.jpg)00no-repeat;height:37px;width:98...
css代码
/**nav**/
#nav{ background:url(images/nav_off.jpg) 0 0 no-repeat; height:37px;
width:980px; margin:0 auto;
}
a.nav_01:hover{ background:url(images/nav_on.jpg) 0 0 no-repeat;}
a.nav_02:hover{ background:url(images/nav_on.jpg) -98px 0 no-repeat;}
a.nav_03:hover{ background:url(images/nav_on.jpg) -196px 0 no-repeat;}
a.nav_04:hover{ background:url(images/nav_on.jpg) -294px 0 no-repeat;}
a.nav_05:hover{ background:url(images/nav_on.jpg) -392px 0 no-repeat;}
a.nav_06:hover{ background:url(images/nav_on.jpg) -490px 0 no-repeat;}
a.nav_07:hover{ background:url(images/nav_on.jpg) -588px 0 no-repeat;}
a.nav_08:hover{ background:url(images/nav_on.jpg) -686px 0 no-repeat;}
a.nav_09:hover{ background:url(images/nav_on.jpg) -784px 0 no-repeat;}
a.nav_10:hover{ background:url(images/nav_on.jpg) -882px 0 no-repeat;}
/**menu**/
.menu{margin: 0px;width: 980px;font-family: arial, sans-serif; position:relative; }
.menu ul{margin:0px;position:relative;}
.menu ul li{ float:left;}
.menu ul li{ height:30px; width:98px; display:block;}
.menu ul li ul {margin: 0px;text-align:center;display:none;width:98px; height:30px;position:relative;}
.menu ul li ul li{float:none;}
.menu ul li a{ height:32px; border:1px;width:99px; display:block;}
.menu ul li.sfhover ul{display:block;}
.menu ul li.sfhover ul li a{background: green; color: #000;height:30px;width:155px}
.menu ul li.sfhover ul li a:hover{background:#3CC; color: #000;height:30px;width:155px}
hr{position:relative;}
页面代码
<script type="text/javascript">
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");
}
}
}
window.onload=menuFix;
</script>
<div id="nav" class="menu">
<ul>
<li><a href="index.aspx" class="nav_01" hidefocus="true"></a></li>
<li><a href="about.aspx" class="nav_02" hidefocus="true"></a>
<asp:Repeater ID="Repeater3" runat="server">
<ItemTemplate>
<ul>
<li><a href="javascript:void(window.open('about.aspx?aboutId=<%#Eval("cAboutID") %>'))"><%#Eval("cAboutName")%></a></li>
</ul>
</ItemTemplate>
</asp:Repeater>
</li>
</ul>
</div>
不是css问题,是页面代码写的有问题。 谢谢 展开
/**nav**/
#nav{ background:url(images/nav_off.jpg) 0 0 no-repeat; height:37px;
width:980px; margin:0 auto;
}
a.nav_01:hover{ background:url(images/nav_on.jpg) 0 0 no-repeat;}
a.nav_02:hover{ background:url(images/nav_on.jpg) -98px 0 no-repeat;}
a.nav_03:hover{ background:url(images/nav_on.jpg) -196px 0 no-repeat;}
a.nav_04:hover{ background:url(images/nav_on.jpg) -294px 0 no-repeat;}
a.nav_05:hover{ background:url(images/nav_on.jpg) -392px 0 no-repeat;}
a.nav_06:hover{ background:url(images/nav_on.jpg) -490px 0 no-repeat;}
a.nav_07:hover{ background:url(images/nav_on.jpg) -588px 0 no-repeat;}
a.nav_08:hover{ background:url(images/nav_on.jpg) -686px 0 no-repeat;}
a.nav_09:hover{ background:url(images/nav_on.jpg) -784px 0 no-repeat;}
a.nav_10:hover{ background:url(images/nav_on.jpg) -882px 0 no-repeat;}
/**menu**/
.menu{margin: 0px;width: 980px;font-family: arial, sans-serif; position:relative; }
.menu ul{margin:0px;position:relative;}
.menu ul li{ float:left;}
.menu ul li{ height:30px; width:98px; display:block;}
.menu ul li ul {margin: 0px;text-align:center;display:none;width:98px; height:30px;position:relative;}
.menu ul li ul li{float:none;}
.menu ul li a{ height:32px; border:1px;width:99px; display:block;}
.menu ul li.sfhover ul{display:block;}
.menu ul li.sfhover ul li a{background: green; color: #000;height:30px;width:155px}
.menu ul li.sfhover ul li a:hover{background:#3CC; color: #000;height:30px;width:155px}
hr{position:relative;}
页面代码
<script type="text/javascript">
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseDown=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onMouseUp=function() {
this.className+=(this.className.length>0? " ": "") + "sfhover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp("( ?|^)sfhover\\b"),"");
}
}
}
window.onload=menuFix;
</script>
<div id="nav" class="menu">
<ul>
<li><a href="index.aspx" class="nav_01" hidefocus="true"></a></li>
<li><a href="about.aspx" class="nav_02" hidefocus="true"></a>
<asp:Repeater ID="Repeater3" runat="server">
<ItemTemplate>
<ul>
<li><a href="javascript:void(window.open('about.aspx?aboutId=<%#Eval("cAboutID") %>'))"><%#Eval("cAboutName")%></a></li>
</ul>
</ItemTemplate>
</asp:Repeater>
</li>
</ul>
</div>
不是css问题,是页面代码写的有问题。 谢谢 展开
推荐律师服务:
若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询