get CSS to only affect one part of page

**John887** · May 2 '16, 07:24 PM

Looking to have the CSS code only affect the first list (menu items) and not the second. How to do this, specifically? If you could, copy/paste the edited code in your response. (I know it has something to do with DIV)

Code:

<!DOCTYPE html>
<html>
  <head>
    <meta content="text/html; charset=windows-1252" http-equiv="content-type">
    <title></title>
    <style type="text/css">
  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;}
</style></head>
  <body>
    <ul id="drop-nav">
      <li><a href="#">Support</a></li>
      <li><a href="#">Web Design</a>
        <ul>
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
        </ul>
      </li>
      <li><a href="#">Content Management</a>
        <ul>
          <li><a href="#">Joomla</a></li>
          <li><a href="#">Drupal</a></li>
          <li><a href="#">WordPress</a></li>
          <li><a href="#">Concrete 5</a></li>
        </ul>
      </li>
      <li><a href="#">Contact</a>
        <ul>
          <li><a href="#">General Inquiries</a></li>
          <li><a href="#">Ask me a Question</a></li>
        </ul>
      </li>
    </ul>
    <br>
    <br>
    <br>
    <ol>
      <li style="list-style-type: disc;"><a href="www.google.com">link1</a></li>
      <li style="list-style-type: disc;"><a href="www.yahoo.com">link2</a></li>
    </ol>
  </body>
</html>