title: How to override inherited dimensions?
body: <p>How to prevent elements from inheriting dimensions of parent elements?
  Example HTML</p>
  
  <pre><code>  &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt;
          &lt;title&gt;Problem&lt;/title&gt;
          &lt;style type="text/css"&gt;
              .main li a {
                  height: 80px;
                  width: 150px;
                  background: #ff00ff;
                  margin-bottom: 1px;
                  display: block;
              }
              .sub li a {
                  display: block;
                  background: #00ff00;
              }           
          &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;div&gt;
              &lt;ul class="main"&gt;
                  &lt;li&gt;
                      &lt;a&gt;Item 1&lt;/a&gt;
                      &lt;ul class="sub"&gt;
                          &lt;li&gt;&lt;a&gt;Subitem 1 - this should not inherit height of 80px&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a&gt;Subitem 2 - this should not inherit height of 80px&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a&gt;Item 2&lt;/a&gt;&lt;/li&gt;              
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>
  
  <p>The .sub li a is inheriting the width and height of .main li a and I don't know why. I have to set the width and height for the outer li but the inner li should have width and height as needed. I can unset inherited float for example by using float:none but I don't know how to reset the specified dimensions so that they do not apply to the sub elements.</p>