本文探讨如何使用CSS实现商品目录的悬停效果，女装默认背景粉色，鼠标经过女鞋、男装时背景切换并显示对应子菜单，但保持女装默认背景颜色问题。代码中可能需要调整`.sa.sbtnulli.active`类以解决此问题。
不用javascritp.
悬停商品目录时，下方出现左侧和右侧导航菜单，默认是显示第一行“女装”的菜单(包括其粉色背景)，女装上有粉色背景，然后hover菜单女鞋、男装时，背景变粉色，同时右侧显示相应的子菜单。
不hover时，背景白色。我的问题是，当划过女鞋、男装时，女装上的默认背景无法去除。试了改变hove时的默认背景类(名为.active),仍去不掉背景。见下图(hover到男装菜单上时效果)：
谁能帮助改一下代码，或者怎样改？最好是直接改了。
多谢啦！
代码在此：
/p>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
测试页面* {
margin: 0;
padding: 0;
cursor: pointer;
}
a {
font-family:Microsoft YaHei,Simsun;
text-decoration:none;
}
.sa {
float: left;
margin-top: 121px;
margin-left: 158px;
position: relative;
z-index: 9999;
width: 200px;
height: 500px;
}
.sbtn {
position: relative;
z-index: 10000;
}
.tnavContainer {
border:0px solid;
background-color: white;
width:200px;
position:relative;
z-index:10001;
height: 36px;
}
.tnav {
float:left;
width:180px;
height:42px;
font-size:14px;
font-family:Microsoft YaHei,Simsun;
line-height:42px;
position:relative;
z-index:10002;
display:inline-block;
text-align:center;
border:1px solid;
}
.tnav a {
color:#444;
}
.navHighlight {
border:0px solid;
position: absolute;
z-index:10003;
width:100%;
height:2px;
top:34px;
left:0;
background-color:#f56400;
}
.sa .sbtn ul {
position: absolute;
z-index: 10000;
width: 210px;
height: 400px;
top: 42px;
left: 0px;
list-style: none;
display: none;
padding-top: 10px;
background-color: #fff;
border:1px solid #e1e3df;
}
.sa .sbtn ul li {
padding-bottom: ;
zoom: 1;
clear: both;
}
.sa .sbtn ul li a {
padding-left: 28px;
font-size: 12px;
margin-top: ;
line-height: 44px;
text-decoration: none;
color: #444;
white-space: nowrap;
}
.sa .sbtn ul li.active{
background-color:#feefe5;
}
.sa .sbtn:hover ul {
display: block;
}
.sa .sbtn ul li:hover .active {
background-color:transparent;
}
.sa .sbtn ul li:hover {
background-color: #feefe5;
}
.sa .sbtn ul li:hover a,.sa .sbtn ul li.active a {
color: #666;
}
.right-menu {
display: none;
width: 820px;
height: 400px;
border:1px solid #e1e3df;
border-right:1px solid #e1e3df;
border-bottom:1px solid #e1e3df;
background-color: #fff;
position: absolute;
top: 0px;
left: 210px;
}
.sa .sbtn ul li .right-menu a {
padding-left:0px;
padding-right:18px;
line-height:42px;
}
.sa .sbtn ul li .right-menu dl {
padding-left:32px;
width:662px;
border:0px solid;
padding-top:13px;
}
.sa .sbtn ul li:hover .right-menu {
display:block;
}
.s1>div{
position: absolute;
left: 210px;
width: 820px;
}
.show{
display:block;
}
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
