Расстраивает поведение CSS с помощью каскадирования

Question

У меня есть структура меню, которая должна выделять каждый элемент по мере его пролистывания, а затем при щелчке некоторые пункты меню расширяются вниз в выпадающие меню. Поведение работает хорошо, но проблема в этом.

Внутри <li class="dropdown"> стили тегов a: переопределяют все, что я указываю. Даже если мой стиль приходит позже.

Я могу «заставить» его работать с флагом «! Важно», помещенным в КАЖДЫЙ отдельный элемент, но я действительно не хочу идти по этому пути. Класс '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.whwhat ".

Answer 2

Я начинаю видеть проблему, "#membership .dropdown a" заменяет ".subnav" на <A> элементах, если вы не указали класс как "a.subnav".

Answer 3

Проблема в том, что # id-определения имеют большее значение, чем .class-определения. Но! Важные определения еще важнее: -)

Добавьте! Важно к определениям стилей, которые не должны быть перезаписаны. например:

.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, я знаю, что это не выглядит красиво: &