Question

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 #333333;
    border-style: solid;
    border-width: 1px 1px 0px 1px;
    height: 22px;
    position: relative;
    padding-right: 16px;
   }

Answer 1

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