Question

我有一个菜单结构，它应该在翻转时突出显示每个项目，然后一些菜单项在单击时向下扩展到下拉菜单。行为没问题，但问题是这样。

在<li class="dropdown">中，a：标签的样式覆盖了我指定的任何内容。即使我的风格随后出现。

我可以“强迫”它使用放在每个元素上的“！important”标志，但我真的不想走那条路。单击下拉菜单中的某个父菜单项时，'subnav'类是应该可见的样式。如果基本的超链接锚值始终强制覆盖它，我怎样才能使subnav类正确显示？

这使用jQuery 1.3

脚本：

 <script type="text/javascript">
     $(document).ready(function () {

         $('.dropdown a').click(function () {
             $(this).addClass("subhover");
         });

         $("ul.topnav li a").click(function () {
             $(this).parent().find("ul.subnav").slideDown('fast').show();

             $(this).parent().hover(function () {
             }, function () {
                 $(this).parent().find("ul.subnav").slideUp('fast');
                 $(this).parent().find("a").removeClass("subhover");
             });
         });
     });
 </script>

HTML：

 <div id="membership">
  <div class="container">
   <div class="container-inner">
    <ul id="options" class="topnav">
     <li><a href="#">Mail</a></li>
     <li><a href="#">Profile</a></li>
     <li><a href="#">Settings</a></li>
     <li class="dropdown">
      <a href="#">Membership</a>
      <ul class="subnav">
       <li>Item</li>
      </ul>
     </li>
    </ul>
   </div>
  </div>
 </div>

CSS：

#membership {
 font-size: 11px;
 font-weight: bold;
 height: 41px;
 font-family: Tahoma;
 color: #fff;
 position: relative;
}

 #membership .container-inner {
  border-color: #1D4088 #1D4088;
  border-style: solid solid none;
  font-size: 11px;
  height: 30px;
  margin-left: 180px;
  padding-left: 10px;
  padding-right: 6px;
  position: relative;
  top: 10px;
 }

  #membership a {
   color: #FFFFFF;
   display: inline-block;
   font-weight: bold;
   height: 22px;
   padding: 8px 16px 0;
   text-decoration: none;
   border-color: transparent;
   border-style: solid;
   border-width: 1px 1px 0px 1px;

  }


  #membership a:hover, #membership a:focus{
   outline:medium none;
  }

  #membership ul {
   list-style-type: none;
  }

   #membership ul li {
    padding: 0 3px 0 5px;
   }

   #membership ul li.active, #membership ul li.active a {
   }

   #membership #options {
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: absolute;
    right: 0;
    top: 0;
   }
   #membership #options li {
    float: left;
   }

   #membership .dropdown {
    float: right;
    position: relative;
   }

   #membership .dropdown ul
   {
       background: none repeat scroll 0 0 #FFFFFF;
       border-color: #333333 #333333 #333333;
       border-style: solid;
       border-width: 1px 2px 2px;
       display: none;
       margin-right: 2px;
       margin-top: -1px;
       min-width: 200px;
       padding: 10px 0 5px;
       position: absolute;
       right: 0;
       top: 100%;
   }


   #membership .dropdown a {
    border-color: transparent;
       border-style: solid;
       border-width: 1px 1px 0px 1px;
       height: 22px;
       position: relative;

    display: inline-block;
    font-weight: bold;
    height: 22px;
    padding: 8px 16px 0;
    text-decoration: none;
   }


   .subhover{
    background-color: #FFFFFF;
    color: #333333;
    border-color: #333333 #333333 #333333;
    border-style: solid;
    border-width: 1px 1px 0px 1px;
    height: 22px;
    position: relative;
    padding-right: 16px;
   }

Answer 1

应用于“#membership a”的样式正确级联到子<a>元素。要防止这种情况，请删除您不想从中进行级联的任何样式，或者如果您不想应用任何样式，请为其命名，如下所示：#membership a.whatever“。

Answer 2

我开始发现问题，“#membership .dropdown a”取代.subnav元素上的“<A>”，除非您将该类指定为“a.subnav”。< / p>

Answer 3

问题是#id-definitions比.class-definitions更重要。但是！重要的定义更为重要： - ）

在不应覆盖的样式定义中添加！important。例如：

.subhover{
    background-color: #FFFFFF !important;
    color: #333333 !important;
    border-color: #333333 #333333 #333333 !important;
    border-style: solid !important;
    border-width: 1px 1px 0px 1px !important;
    height: 22px !important;
    position: relative !important;
    padding-right: 16px !important;
   }

编辑：ja，我知道它看起来不太好：＆amp;

使用级联的令人沮丧的CSS行为

3 个答案: