UC知道CSS控制菜单背景问题
来源：百度知道 编辑：UC知道 时间：2024/05/17 03:21:37
当鼠标移动到菜单上时菜单背景变成200682494749491.gif；怎样实现当鼠标点击它之后还是这个背景，点击哪个菜单，哪个菜单的背景就是200682494749491.gif这个图片，其它的不变！请高手指教！
<style type="text/css">
#nav{
text-align: center;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
margin:0px auto;
}
#nav ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#nav li{
float: left;
}
#nav li a{
text-decoration: none;
color: #ffffff;
background: url(200682494749491.gif) no-repeat 0px 0px;
width: 76px;
line-height: 25px;
display: block;
}
#nav li a:hover{
color: #ffffff;
background: url(200682494749491.gif) no-repeat 0px -25px;
}
</style>
<div id="nav" align="center">
<ul>
<li><a href="index.asp" class="navli">首 页</a></li>
<li><a href="company.asp">关于我们</a&g
<style type="text/css">
#nav{
text-align: center;
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
margin:0px auto;
}
#nav ul{
margin: 0px;
padding: 0px;
list-style-type: none;
}
#nav li{
float: left;
}
#nav li a{
text-decoration: none;
color: #ffffff;
background: url(200682494749491.gif) no-repeat 0px 0px;
width: 76px;
line-height: 25px;
display: block;
}
#nav li a:hover{
color: #ffffff;
background: url(200682494749491.gif) no-repeat 0px -25px;
}
</style>
<div id="nav" align="center">
<ul>
<li><a href="index.asp" class="navli">首 页</a></li>
<li><a href="company.asp">关于我们</a&g
这个没问题啊，就是纯CSS控制
你把鼠标移上和滑出的两张图都做在一张上面
然后在CSS样式里写当滑出的时候图片的position 0px 0px，鼠标经过的时候 position 20px 0px
以上数字是例子，具体数字要按照你图片来的
我是参考CSS黑板报上面的文章，有兴趣你可以自己直接搜下
直接百度搜索：CSS黑板报，第一个就是了
可以直接用css控制吗 不需要javascript?