Frustrating CSS Behavior with Cascading

I have a menu structure that is supposed to highlight each item as it is rolled over , and then some menu items expand downward into dropdown menus when clicked. The behavior works okay, but the problem is this.

Within the <li class="dropdown">, the styles of the a: tags are overriding anything I am specifying. Even if my style comes afterwards.

I can 'force' it to work with the "!important" flag placed on EVERY single element, but I really don't want to go that route. The 'subnav' class is the style that should be visible when clicking one of the parent menu items of the dropdown menu. how can I get the subnav class to show properly, if the basic hyperlink anchor values forcefully override it all the time?

This uses jQuery 1.3

Script:

 <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 #33333开发者_如何学Go3;
    border-style: solid;
    border-width: 1px 1px 0px 1px;
    height: 22px;
    position: relative;
    padding-right: 16px;
   }

I'm beginning to see the problem, "#membership .dropdown a" supersedes ".subnav" on <A> elements, unless you specify the class as "a.subnav".

The styles applied to "#membership a" correctly cascade to child <a> elements. To prevent this, remove any styles that you don't want to cascade from it, or if you want to apply nothing, give it a class name, like so: #membership a.whatever".

The problem is that #id-definitions have more importance than .class-definitions. But !important-definitions are even more important :-)

Add an !important to the style definitions which should not be overwritten. eg:

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

edit: ja, i know it doesn't look nice :&