极客观点
项目管理
HarmonyOS
不用javascritp.
悬停商品目录时，下方出现左侧和右侧导航菜单，默认是显示第一行“女装”的菜单（包括其粉色背景），女装上有粉色背景，然后hover菜单女鞋、男装时，背景变粉色，同时右侧显示相应的子菜单。
不hover时，背景白色。我的问题是，当划过女鞋、男装时，女装上的默认背景无法去除。试了改变hove时的默认背景类（名为.active）,仍去不掉背景。见下图（hover到男装菜单上时效果）：
谁能帮助改一下代码，或者怎样改？最好是直接改了。
多谢啦！
代码在此：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<style type="text/css">
* {
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;
}
</style>
</head>
<body>
<div class="sa">
<div class="sbtn">
<div class="tnavContainer">
<div class="tnav">
<span><a href="#">商品目录</a></span>
</div>
</div>
<ul>
<li class="s1 active"><a href="#">女装</a>
<div class="right-menu show">
<dl>
<dd>
<a href="#">针织衫</a>
<a href="#">T恤</a>
<a href="#">毛衣</a>
<a href="#">衬衫</a>
<a href="#">半身裙</a>
<a href="#">长裙</a>
<a href="#">短裙</a>
<a href="#">风衣</a>
<a href="#">卫衣</a>
<a href="#">短外套</a>
<a href="#">夹克</a>
<a href="#">裤子</a>
<a href="#">西装</a>
<a href="#">大码女装</a>
<a href="#">妈妈装</a>
<a href="#">旗袍</a>
<a href="#">唐装</a>
<a href="#">休闲裤</a>
<a href="#">阔脚裤</a>
<a href="#">牛仔裤</a>
<a href="#">短裤</a>
<a href="#">打底衫</a>
<a href="#">打底裤</a>
<a href="#">吊带</a>
<a href="#">内衣</a>
<a href="#">皮衣</a>
<a href="#">皮草</a>
<a href="#">礼服</a>
<a href="#">舞台装</a>
<a href="#">套装</a>
</dd>
</dl>
</div>
</li>
<li class="s1">
<a href="#">女鞋</a>
<div class="right-menu">
<dl>
<dd>
<a href="#">高跟鞋</a>
<a href="#">坡跟鞋</a>
<a href="#">平底鞋</a>
<a href="#">尖头</a>
<a href="#">方头</a>
<a href="#">马丁靴</a>
<a href="#">女靴</a>
<a href="#">帆布鞋</a>
<a href="#">凉鞋</a>
<a href="#">布鞋</a>
<a href="#">绣花鞋</a>
<a href="#">坡跟鞋</a>
<a href="#">雪靴</a>
<a href="#">一脚蹬</a>
</dd>
</dl>
</div>
</li>
<li class="s1"><a href="#">男装</a>
<div class="right-menu">
<dl>
<dd>
<a href="#">男装</a>
</dd>
</dl>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
