Как остановить наследование CSS в списке неупорядоченных - PullRequest
Новая
       13

Как остановить наследование CSS в списке неупорядоченных

4 голосов
/ 22 июля 2010

Я пытаюсь настроить меню с подменю, которое содержит ул. Мой вопрос заключается в том, как удалить фоновое изображение подменю, которое наследует от меню ul. Я ценю любую помощь. Большое спасибо!

мой HTML 

<ul id="menuBar">
   <li id="test1">test1</li>
   <li id="test2"><a href="#">Pro1</a>
     <div class="subMenu">
        <ul>
           <li><a href="#">sub1</a></li>  //all li a would get the same  
                                             //backgroundimage btForTest2.jpg
                                             // butI just want a clean background
           <li><a href="#">sub2</a></li>
           <li><a href="#">sub3</a></li>
         </ul>
                 <ul>
            <li><a href="#">Volleyball</a></li>
            <li><a href="#">Walking</a></li>
            <li><a href="#">Water Shoes</a></li>
         </ul>
       </div> <!--end of submenu-->
     </li>
  </ul>

CSS: 

 #menuBar #mens a{
    background:url("../images/btForTest2.jpg") no-repeat;
    display:block;
    border-right:1px solid #ffffff;
    width:112px;
    height:37px;
    }


    .subMenu li  a{
        list-style:none;
        margin: 0; 
        padding: 5px;
        width: 200px;   //width is 112px not 200 px
        float: left;
        color:#ffffff;
        text-decoration:none;
    }

Ответы [ 3 ]

8 голосов
/ 22 июля 2010 
.subMenu li  a
{
    background: none;
}

если он не прилипает, вы можете добавить! Важный флаг 

.subMenu li  a
{
    background: none !important;
}
5 голосов
/ 22 июля 2010

Добавьте в раздел .subMenu li a следующее: 

background:none !important;

Редактировать: Открыл вкладку до того, как Дурилай ответил, поэтому я не увидел его ответ ...

3 голосов
/ 22 июля 2010

Вместо добавления другого правила для перезаписи ошибки переписать селектор в первом правиле, чтобы применить его только к элементам внешнего списка: 

#menuBar > li > a {
    background: red;
}

> означает прямого потомка.

...