title: How do you separate two nav elements from one another in css and html?
body: <p>I have two nav elements that I'm using one just below the header and another one where I have the nav element nested inside an aside element. I added the code for the HTML for the nav elements and added the code for the CSS for the nav elements at the bottom of the page. I also have a picture of the website that you guys can look at which is also at the bottom of the page. What I am trying to do is add a horizontal navigation bar for one nav element and a vertical navigation bar for another nav element, but the first nav element I created is overriding the CSS for my second nav element. I'm trying to figure out a way to separate the two so the second nav element has its own CSS code. I don't know if I can use a class attribute or id attribute for the second nav element so it's separate from the first nav element I created. I can really use some help in figuring out this issue.     </p>
  
  <p>Here is the HTML code for the first nav element:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;nav&gt;
    &lt;ul&gt;
      &lt;li&gt;
        &lt;a class="current" href="index7.html"&gt;Home&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;Product List&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;Personal&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;Decoration Ideas&lt;/a&gt;
        &lt;ul class="submenu"&gt;
          &lt;li&gt;
            &lt;a href="#"&gt;Outdoor&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="#"&gt;Indoor&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="#"&gt;Table&lt;/a&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;a href="#"&gt;Treats&lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;
        &lt;a href="#"&gt;Join Email&lt;/a&gt;       
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;aside&gt;
    &lt;nav id="nav_list"&gt;    
      &lt;ul&gt;
        &lt;li&gt;
          &lt;a href="props.html"&gt;Props&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="costumes.html"&gt;Costumes&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="effects.html"&gt;Special Effects&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="masks.html"&gt;Masks&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt; 
    &lt;/nav&gt;
  &lt;/aside&gt;
  </code></pre>
  
  <p>Here is the CSS code for the first and second nav elements</p>
  
  <pre class="lang-css prettyprint-override"><code>/* nav styles */
  nav {
    position: absolute !important;
    top: 0px !important;
    left: 0px !important;
    display: block !important;
  }
  
  nav ul {
      list-style: none;
      margin: 0;
      padding: 0;
      position: relative;
  }
  nav ul &gt; li {
      float: left;
  }
  nav a {
      display: block;
      width: 160px;
      text-align: center;
      padding-top: 1em;
      padding-bottom: 1em;
      text-decoration: none;
      background-color: #000000;
      color: white;
      font-weight: bold;
  }
  .current {
      color: orange
  }
  .submenu {
      position: absolute;
      display: none;
      top: 3em;
  }
  .submenu li {
      float: none; 
  }
  .submenu a:hover {
      background-color: gray;
  }
  nav ul li:hover &gt; ul {
      display: block;
  } 
  
  /* second nav element */
  aside {
    position: absolute !important;  
    top: 100px !important;
    left: 0px !important;
    display: block !important;
  }
  
  #nav_list ul {
    list-style-type: none;
    &lt;!-- margin-left: 1.25em; --&gt;
    margin-bottom; 1.5em;
  }
  #nav_list ul li {
    width: 200px;
    margin-bottom: .5em;
    &lt;!-- border: 2px solid blue; --&gt; 
  }
  
  #nav_list a:hover {
      background-color: gray;
  }
  </code></pre>
  
  <p>Website screenshot below:</p>
  
  <p><a href="https://i.stack.imgur.com/DhyT7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DhyT7.png" alt="website right here"></a></p>