title: CSS for only 1 part of HTML
body: <p>How do get CSS to only affect the first list (menu items) only, and not the second list? Please help. I've been at this all day. If you could, copy/paste the complete code back in your response. VERY appreciated!</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta content="text/html; charset=windows-1252" http-equiv="content-    type"&gt;
      &lt;title&gt;&lt;/title&gt;
      &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;&lt;/head&gt;
    &lt;body&gt;
      &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; 
      &lt;br&gt;
      &lt;br&gt;
      &lt;br&gt;
      &lt;ol&gt;
        &lt;li style="list-style-type: disc;"&gt;&lt;a href="www.google.com"&gt;link1&lt;/a&gt;&lt;/li&gt;
        &lt;li style="list-style-type: disc;"&gt;&lt;a    href="www.yahoo.com"&gt;link2&lt;/a&gt;&lt;/li&gt;
      &lt;/ol&gt;
    &lt;/body&gt; 
  &lt;/html&gt;
  </code></pre>