jquery - 级联令人沮丧的CSS行为

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

在<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;
   }

最佳答案

我开始看到问题，除非您将类指定为“ #membership .dropdown a”，否则“ .subnav”将取代<A>元素上的“ a.subnav”。

关于jquery - 级联令人沮丧的CSS行为，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/2413599/