title: How to make ul and li style in css just for menu
body: <p>I have style for my horizontal menu like this</p>
  
  <pre><code>&lt;style&gt;
   ul  {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
  
  li {
     float: left;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  li a:hover:not(.active) {
    background-color: #111;
  }
  
  .active {
    background-color: #4CAF50;
  }
  &lt;/style&gt;
  </code></pre>
  
  <p>and in my HTML I have code like this for my horizontal menu</p>
  
  <pre><code>&lt;ul&gt;
   &lt;li &gt;&lt;a href="#home"&gt;Home&lt;/a&gt;&lt;/li&gt;
   &lt;li &gt;&lt;a href="#news"&gt;News&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="#contact"&gt;Contact&lt;/a&gt;&lt;/li&gt;
   &lt;li style="float:right"&gt;&lt;a class="active" href="#about"&gt;About&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>My horizontal menu is working, the problem is when I have another ul and li in another part of my HTML code (not for horizontal menu) like this</p>
  
  <pre><code>&lt;ul&gt;
   &lt;li &gt;Parth 1&lt;/li&gt;
   &lt;li &gt;part 2&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>their style follow the style for my horizontal menu, I am newbie for CSS code so any help?</p>