Diese Frage hat hier bereits eine Antwort:

Unten finden Sie den Beispielcode-Block, den ich verwende. Ich habe zwei Satz CSS und möchte auf zwei UL-Komponenten anwenden. Das Ergebnis ist jedoch, dass das innere "UL" einen Teil der CSS enthält, die für das übergeordnete Element definiert wurde. und sogar einige der in "b" definierten CSS werden von "a" überschrieben ... Albtraum ...

Wie kann ich die Vererbung stoppen?

<ul class="moduleMenu-ul">
    /* for loop begin */
        <li class="moduleMenu-li">
                  <a></a>
        </li>
    /* for loop end */
     <li class="moduleMenu-li">
          <a>On Over the div below will be show</a>
          <div id="extraModuleMenuOptions">
                <ul class="flow-ul">
                 /*for loop begin*/
                    <li class="flow-li">
                          <a class="flow-a"></a>
                    </li>
                 /*for loop end*/
                </ul>
          </div>
     </li>
</ul

CSS:

.moduleMenu-ul {
    width: 100%;
    height: 43px;
    background: #FFF url("../images/module-menu-bg.gif") top left repeat-x;
    font-weight: bold;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.moduleMenu-ul .moduleMenu-li {
    display: block;
    float: left;
    margin: 0 0 0 5px;
}

.moduleMenu-ul .moduleMenu-li a {
    height: 43px;
    color: #777;
    text-decoration: none;
    display: block;
    float: left;
    line-height: 200%;
    padding: 8px 15px 0;
    text-transform:capitalize;
}

.moduleMenu-ul .moduleMenu-li a: hover {color: # 333; }

.moduleMenu-ul .moduleMenu-li a.current{
    color: #FFF;
    background: #FFF url("../images/module-menu-current-bg.gif") top left repeat-x;
    padding: 5px 15px 0;
}

#extraModuleMenuOptions {
    z-index:99999;
    visibility:hidden;
    position:absolute;
    color:#FFFFFF;
    background-color:#236FBD;
}

#extraModuleMenuOptions .flow-ul {
    text-align:left;
}

#extraModuleMenuOptions .flow-ul .flow-li {
    display:block;
}

#extraModuleMenuOptions .flow-ul .flow-li .flow-a {
    color:#FFFFFF;
}