我正在使用 asp.net4.0 并尝试通过使用 CSS 创建一个菜单栏, 当我运行程序时,移动和点击工作正常,但事件代码不知道为什么会发生这种情况
CSS 代码
#main-nav{
height:29px;
float:left;
background-image:url(images/nav-bg.gif);
background-repeat:repeat-x;
background-position:top left;
width:100%;
}
#main-nav ul,
#main-nav li{
padding:0px;
margin:0px;
list-style-type:none;
}
#main-nav ul{
height:29px;
line-height:29px;
background-image:url(images/nav-bar.gif);
background-position:right;
background-repeat:no-repeat;
float:left;
padding:0px 1px 0px 0px;
margin:0px 0px 0px 10px;
}
#main-nav li{
height:29px;
line-height:29px;
display:inline;
position:relative;
float:left;
width:80px;
text-align:center;
}
#main-nav li a{
height:29px;
width:80px;
text-align:center;
float:left;
background-image:url(images/nav-bar.gif);
background-position:left;
background-repeat:no-repeat;
}
#main-nav li a:link,
#main-nav li a:visited{
color:#FFFFFF;
text-decoration:none;
}
#main-nav li active{
background-image:url(images/active.gif);
background-repeat:no-repeat;
background-position:left;
}
#main-nav li a:hover{
background-image:url(images/active.gif);
background-repeat:no-repeat;
background-position:left;
}
更新的 CSS 文件
#main-nav{
height:29px;
float:left;
background-image:url(images/nav-bg.gif);
background-repeat:repeat-x;
background-position:top left;
width:100%;
}
#main-nav ul,
#main-nav li{
padding:0px;
margin:0px;
list-style-type:none;
}
#main-nav ul{
height:29px;
line-height:29px;
background-image:url(images/nav-bar.gif);
background-position:right;
background-repeat:no-repeat;
float:left;
padding:0px 1px 0px 0px;
margin:0px 0px 0px 10px;
}
#main-nav li{
height:29px;
line-height:29px;
display:inline;
position:relative;
float:left;
width:80px;
text-align:center;
}
#main-nav li a{
height:29px;
width:80px;
text-align:center;
float:left;
background-image:url(images/nav-bar.gif);
background-position:left;
background-repeat:no-repeat;
}
#main-nav li a:link,
#main-nav li a:visited{
color:#FFFFFF;
text-decoration:none;
}
#main-nav li a:active ,#main-nav li a:focus
{
color:Aqua;
background-image:url(images/active.gif);
background-repeat:no-repeat;
background-position:left;
}
#main-nav li a:hover{
background-image:url(images/active.gif);
background-repeat:no-repeat;
background-position:left;
}
最佳答案
没有active
标签。将其更改为:
#main-nav li a:active{
background-image:url(images/active.gif);
background-repeat:no-repeat;
background-position:left;
}
关于CSS 事件不工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15002274/