title: How do I apply (or edit) a broad set of styles to only one class/ID?
body: <p>I know the basics of css and have never had any trouble with this before... however I'm currently playing around with an example of a css drop down list using the following css:</p>
  
  <pre><code>&lt;style type="text/css"&gt;
    ul {list-style: none;padding: 0px;margin: 0px;}
    ul li {display: block;position: relative;float: left;border:1px solid #000}
    li ul {display: none;}
    ul li a {display: block;background: #000;padding: 5px 10px 5px 10px;text-decoration: none;
             white-space: nowrap;color: #fff;}
    ul li a:hover {background: #f00;}
    li:hover ul {display: block; position: absolute;}
    li:hover li {float: none;}
    li:hover a {background: #f00;}
    li:hover li a:hover {background: #000;}
    #drop-nav li ul li {border-top: 0px;}
  &lt;/style&gt;
  </code></pre>
  
  <p>and the following example html:</p>
  
  <pre><code>&lt;ul id="drop-nav"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Support&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Web Design&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;HTML&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;CSS&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;JavaScript&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Content Management&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;Joomla&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Drupal&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;WordPress&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Concrete 5&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a href="#"&gt;General Inquiries&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#"&gt;Ask me a Question&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>It works fine but obviously the css also affects any other lists on the page. I want all of the css to apply to only child elements of #drop-nav.</p>
  
  <p>I am unsure as to the best way to achieve this? I've tried prefixing/postfixing the css rules with the ID but while it works for some of the rules it seems to break other ones and I can't see why.</p>
  
  <p>Ideally I'd like an answer which teaches me how to understand this problem better.... I don't see what I'm missing.</p>