title: Trouble with CSS styles applying to everything
body: <p>I want to create a horizontal navigation bar on one of my pages, so I used a list and then edited it in CSS.  However, the same page also has other lists, and when I have applied the styling it has worked for the nav bar, but has completely destroyed the other lists!  How do I get round this?  I've tried ID tags but I don't know if they overrule applying a certain style to all lists?  This is my CSS code:</p>
  
  <pre class="lang-css prettyprint-override"><code>#menubar {
  
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #85aff2;
  
  }
  
  li {
  
  float: left;
  
  }
  
  li a {
  
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  
  }
  </code></pre>
  
  <p>All lists on the page are 'standard' lists, i.e. they are all bog standard <code>&lt;ul&gt;</code> or <code>&lt;ol&gt;</code> with no id tags - apart from the navigation bar list, which I have called 'menubar'.</p>