title: How do I style two different lists in html and css
body: <p>so I tried to make a website where I had a navigation bar (which used an un-organized list) and then I did another one for a menu of the magazine I was going to write about (like a table of contents basically). I used the &lt; div > element but then I get the dots on the navigation bar and don't know how to fix it. Any help fixing the dot problem or fixing my code will be greatly appreciated. Thank you. My code will be below. Note: I'm new to stack-overflow and don't know how to use it so I'm very sorry for my dumb errors. </p>
  
  <pre><code>&lt;!--DOCTYPE html--&gt;
  &lt;!--Decleration--&gt;
  &lt;html lang="fr"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;
  Accès Magazine-Début&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;!--Navigation Bar--&gt;
  &lt;div class="nav"&gt;
  &lt;nav&gt;
  &lt;ul&gt;
  &lt;h1 id="n_title"&gt;Accès Magazine&lt;/h1&gt;
  &lt;input type="text" placeholder="Cherche..."&gt;
  &lt;li&gt;&lt;a class="active" href="home.html"&gt;Début&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="magazines.html"&gt;Magazines&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="t_news.html"&gt;Actualites Tendances&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="sub.html"&gt;Abonner&lt;/a&gt;&lt;/li&gt;
   &lt;li&gt;&lt;a href="contact.html"&gt;Contacte Nous!&lt;/a&gt;&lt;/li&gt;
   &lt;/ul&gt;
   &lt;/nav&gt;
   &lt;/div&gt;
   &lt;!--Start of Body--&gt;
   &lt;h1 id="first_title"&gt;Lecture d'Ajourd Hui&lt;/h1&gt;
   &lt;hr  /&gt;
   &lt;!--Start of Magazine--&gt;
   &lt;h1 id="m_title"&gt;Jeudi, Mars 15&lt;sup&gt;ème&lt;/sup&gt;, 2018&lt;/h1&gt;
   &lt;p&gt;Par: .&lt;/p&gt;
   &lt;img src="https://www.pixilart.com/images/art//f93e748af187b11.png?v=1520646930" alt="Coverture de Magazine" title="Accès Magazine. Jeudi Mars 15&lt;sup&gt;ème&lt;sup&gt;, 2018" width="500" height="450"&gt;
  &lt;p&gt;
    &lt;figcaption&gt;
      Premier page
     &lt;/figcaption&gt;
    &lt;/p&gt;
  &lt;hr  /&gt;
  &lt;!--Next Page--&gt;
  &lt;h3&gt;Sommaire&lt;/h3&gt;
  &lt;div class="sum"&gt;
  &lt;ul&gt;
    &lt;li&gt;Technologie&lt;/li&gt;
    &lt;li&gt;La Meteo&lt;/li&gt;
    &lt;li&gt;&lt;/li&gt;
    &lt;li&gt;&lt;/li&gt;
    &lt;li&gt;&lt;li&gt;
    &lt;li&gt;Petits Anonces&lt;/li&gt;
  &lt;/ul&gt;
    &lt;/div&gt;
  //CSS
  .nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
   }
  .nav li {
  float: left;
  }
  .nav li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
   }
  .nav li a:hover {
   background-color: #111;
   }
   .nav .active {
   background-color: #4CAF50;
   }
   #n_title {
   color: white;
   }
   input[type=text] {
   float: left;
   padding: 6px;
   border: none;
   marging-top: 10px;
   marging-right: 20px;
   font-size: 17px;
   }
   .nav {
   position: -webkit-sticky;
   position: sticky;
   top: 0;
   }
   body {
   background-color: white;
   } 
   p {
   background-color: null;
   } 
   #first_title {
   color: black;
   text-align: center;
   }
   .sum {
   text-align: left;
   }
  </code></pre>