**css+html为什么右侧菜单的字体大小和边距设置在失效?谁能看下*

左侧菜单女装对应的右下侧菜单的类.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
阅读 1.8k
1 个回答

是你css样式的选取问题。
给这个加个class left

<a  class="left"  href="">左菜单1</a>
<a  class="left" href="">左菜单2-1</a> 

然后这样子给他加样式

.leftNav ul li a.left{
            font-size:20px;

        }
推荐问题