左侧菜单女装对应的右下侧菜单的类.rightNav和.rightNav dl以及.rightNav dd上设置的边距和字体大小不生效,只有字体颜色生效(可改)。右下侧菜单就是那些橙色字体。
具体见下截屏:
怎么改都不行,好像改左边的.leftNav ul li边距时,右下侧菜单会跟着改变同样的边距,字体样式如此。橙色字体菜单想改左边距为0(比如)、字号改为12px,怎么也改不了,问题在哪里???
请各位帮忙看下!
三克油。
代码如下:
<!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 auto;
padding: 0;
cursor: pointer;
}
a {
font-family:Microsoft YaHei,Simsun;
text-decoration:none;
}
.topNavContainer {
margin-top:121px;
width:100%;
height:42px;
border-top:1px solid;
border-bottom:1px solid;
}
.topNav {
border:1px solid;
width:977px;
height:42px;
position:relative;
}
.topNav a {
color:#444;
}
.topNav ul {
list-style:none;
}
.topNav ul li {
padding-right:40px;
font-size:14px;
line-height:42px;
float:left;
}
.tnavHighLight {
display:none;
position:absolute;
z-index:100009;
height:2px;
width:10%;
background-color:#f56400;
top:40px;
left:-6px;
}
.topNav ul li:hover .tnavHighLight {
display:block;
}
.leftNav {
position:relative;
top:0;
}
.leftNav ul {
left:-28px;
padding-top:10px;
list-style:none;
position:absolute;
z-index:10006;
display:none;
line-height:44px;
background-color:white;
border:1px solid;
height:400px;
}
.leftNav ul li {
clear:both;
background-color:white;
width:210px;
padding-right:0;
}
.leftNav ul li a {
font-size:14px;
padding-left:28px;
font-family:Microsoft YaHei,Simsun;
}
.topNav ul li:hover .leftNav ul{
display:block;
}
.leftNav ul li.active{
background-color:#feefe5;
}
.leftNav ul li:hover .active {
background-color:transparent;
}
.leftNav ul:hover li.active{
background-color:#fff;
}
.leftNav ul li:hover {
background-color:#feefe5 !important;
}
.rightNav {;
border:1px solid;
position:absolute;
width:820px;
height:400px;
top:0px;
left:210px;
padding-left:0;
padding-top:10px;
background-color:white;
display:none;
}
.rightNav dl {
float:left;
width:662px;
padding-left:0px;
border:1px solid;
}
.rightNav dd {
font-size:10px;
padding-left:0px;
}
.rightNav a {
float:left;
color:#f56400;
padding-right:0px;
padding-left:0px;
font-size:10px;
display:inline-block;
display:-moz-inline-stack;
}
.visible {
display:block;
}
.leftNav ul li:hover .rightNav {
display:block;
}
</style>
</head>
<body>
<div class="topNavContainer">
<div class="topNav">
<ul>
<li><a href="">顶菜单1</a>
<div class="tnavHighLight"></div>
<div class="leftNav">
<ul>
<li class="active"><a href="">左菜单1</a>
<div class="rightNav visible">
<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><a href="">左菜单2</a>
<div class="rightNav">
<dl>
<dd><a href="">衣服2</a>
<a href="">衣服2</a>
<a href="">衣服2</a>
<a href="">衣服2</a>
<a href="">衣服2</a>
</dd>
</dl>
</div>
</li>
</ul>
</div>
</li>
<li><a href="">顶菜单2</a>
<div class="tnavHighLight" style="left:60px;"></div>
<div class="leftNav" style="margin-left:-90px;">
<ul>
<li class="active"><a href="">左菜单2-1</a>
<div class="rightNav visible">
<dl>
<dd><a href="">衣服2-1</a>
<a href="">衣服2-1</a>
<a href="">衣服2-1</a>
<a href="">衣服2-1</a>
<a href="">衣服2-1</a>
</dd>
</dl>
</div>
</li>
<li><a href="">左菜单2-2</a>
<div class="rightNav">
<dl>
<dd><a href="">衣服2-2</a>
<a href="">衣服2-2</a>
<a href="">衣服2-2</a>
<a href="">衣服2-2</a>
<a href="">衣服2-2</a>
</dd>
</dl>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</body>
</html
是你css样式的选取问题。
给这个加个class left
然后这样子给他加样式