title: How to selectively style certain li and ul elements?
body: <p>I have designed a navigation bar for my website using the following CSS:</p>
  
  <pre><code>&lt;style&gt;
  ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #ff9933;
      font-size:90%;
  }
  
  li {
      float: left;
      border-right: 1px solid #ffb366;
  }
  
  li a {
      display: block;
      color: white;
      text-align: center;
      padding-left: 10px;
      padding-right: 10px;
      padding-top: 3px;
      padding-bottom: 3px;
      text-decoration: none;
  }
  
  li a:hover {
      background-color: #e67300;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>This is a version of the horizontal navigation bar example documented at w3schools.com: <a href="http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black" rel="nofollow noreferrer">http://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_horizontal_black</a></p>
  
  <p>My problem is that it affects other <code>&lt;li&gt;</code> and <code>&lt;ul&gt;</code> elements used in my website as well, not just the navbar. How do I ensure the navbar ones stay separate from other <code>&lt;li&gt;</code> and <code>&lt;ul&gt;</code> elements, using solely CSS? I've started learning CSS quite recently, so I'm certain I'm missing something pretty fundamental here.</p>