Как вы отделяете два навигационных элемента друг от друга в css и html?

Question

У меня есть два элемента nav, которые я использую, один прямо под заголовком, а другой - там, где у меня есть элемент nav, вложенный в элемент aside. Я добавил код для HTML для элементов nav и добавил код для CSS для элементов nav внизу страницы. У меня также есть фотография веб-сайта, который вы, ребята, можете посмотреть, который также находится внизу страницы. Я пытаюсь добавить горизонтальную панель навигации для одного элемента навигации и вертикальную панель навигации для другого элемента навигации, но первый созданный элемент навигации переопределяет CSS для моего второго элемента навигации. Я пытаюсь найти способ их разделения, чтобы у второго элемента nav был свой код CSS. Я не знаю, могу ли я использовать атрибут class или id для второго элемента nav, так что он отделен от первого элемента nav, который я создал. Я действительно могу использовать некоторую помощь в решении этой проблемы.

Вот код HTML для первого навигационного элемента:

<nav>
  <ul>
    <li>
      <a class="current" href="index7.html">Home</a>
    </li>
    <li>
      <a href="#">Product List</a>
    </li>
    <li>
      <a href="#">Personal</a>
    </li>
    <li>
      <a href="#">Decoration Ideas</a>
      <ul class="submenu">
        <li>
          <a href="#">Outdoor</a>
        </li>
        <li>
          <a href="#">Indoor</a>
        </li>
        <li>
          <a href="#">Table</a>
        </li>
        <li>
          <a href="#">Treats</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">Join Email</a>       
    </li>
  </ul>
</nav>

<aside>
  <nav id="nav_list">    
    <ul>
      <li>
        <a href="props.html">Props</a>
      </li>
      <li>
        <a href="costumes.html">Costumes</a>
      </li>
      <li>
        <a href="effects.html">Special Effects</a>
      </li>
      <li>
        <a href="masks.html">Masks</a>
      </li>
    </ul> 
  </nav>
</aside>

Вот код CSS для первого и второго навигационных элементов

/* 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 > 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 > 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;
  <!-- margin-left: 1.25em; -->
  margin-bottom; 1.5em;
}
#nav_list ul li {
  width: 200px;
  margin-bottom: .5em;
  <!-- border: 2px solid blue; --> 
}

#nav_list a:hover {
    background-color: gray;
}

Скриншот сайта ниже:

Answer 1

проверить! Важные вещи.

   <style>
    /* 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 > 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 > 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;
      <!-- margin-left: 1.25em; -->
      margin-bottom; 1.5em;
    }
    #nav_list ul li {
      width: 200px;
      margin-bottom: .5em;
      <!-- border: 2px solid blue; --> 
    }

    #nav_list a:hover {
        background-color: gray;
    }

    </style>
    <nav>
      <ul>
        <li>
          <a class="current" href="index7.html">Home</a>
        </li>
        <li>
          <a href="#">Product List</a>
        </li>
        <li>
          <a href="#">Personal</a>
        </li>
        <li>
          <a href="#">Decoration Ideas</a>
          <ul class="submenu">
            <li>
              <a href="#">Outdoor</a>
            </li>
            <li>
              <a href="#">Indoor</a>
            </li>
            <li>
              <a href="#">Table</a>
            </li>
            <li>
              <a href="#">Treats</a>
            </li>
          </ul>
        </li>
        <li>
          <a href="#">Join Email</a>       
        </li>
      </ul>
    </nav>

    <aside>
      <nav id="nav_list">    
        <ul>
          <li>
            <a href="props.html">Props</a>
          </li>
          <li>
            <a href="costumes.html">Costumes</a>
          </li>
          <li>
            <a href="effects.html">Special Effects</a>
          </li>
          <li>
            <a href="masks.html">Masks</a>
          </li>
        </ul> 
      </nav>
    </aside>

Answer 2

Ваш CSS нацелен на все элементы навигации, потому что вы попросили об этом. У вас нет заданных c назначенных классов (или идентификаторов) nav или ul.

Я бы посоветовал вам назначить каждому элементу nav разные классы (или идентификаторы), чтобы вы могли затем нацеливать каждый из них отдельно в своем CSS и применить желаемый стиль. Например, вы можете присвоить горизонтальной навигации класс = "горизонтальный-навигация" и вертикальной навигации класс = "вертикальный-переход".

Таким образом, один отделен от другого по стилю.