Note that there are some explanatory texts on larger screens.

plurals
  1. POhow to prevent css inherit
    primarykey
    data
    text
    <p>Below are the sample code block i use. I have two set of css, and want to apply onto two UL component. however, the result come out, the inner "UL" will hold some of the css which defined for its parent. and even some of the css defined in "b" will be override by "a"... nightmare...</p> <p><strong>how can i stop the inheritance???</strong></p> <pre><code>&lt;ul class="moduleMenu-ul"&gt; /* for loop begin */ &lt;li class="moduleMenu-li"&gt; &lt;a&gt;&lt;/a&gt; &lt;/li&gt; /* for loop end */ &lt;li class="moduleMenu-li"&gt; &lt;a&gt;On Over the div below will be show&lt;/a&gt; &lt;div id="extraModuleMenuOptions"&gt; &lt;ul class="flow-ul"&gt; /*for loop begin*/ &lt;li class="flow-li"&gt; &lt;a class="flow-a"&gt;&lt;/a&gt; &lt;/li&gt; /*for loop end*/ &lt;/ul&gt; &lt;/div&gt; &lt;/li&gt; &lt;/ul </code></pre> <p>CSS:</p> <pre><code>.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; } </code></pre> <p>.moduleMenu-ul .moduleMenu-li a:hover { color: #333; }</p> <pre><code>.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; } </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload