Добавление раскрывающегося меню на мою панель навигации переместило этот дочерний элемент вправо

Question

Когда я попытался добавить раскрывающееся меню на свою панель навигации, он отправил этот дочерний элемент справа от панели навигации. Я хочу, чтобы это был третий ребенок. Как я могу это исправить? Я попытался сделать его абсолютным, чтобы сохранить свое место, однако затем он будет помещаться поверх другого ребенка. Я не хочу этого.

rightNav {
    float: left;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
    background: white;
    
}

.rightNav:hover{
    color: #0067ff;
    transition-duration: .4s;
}

.bar {
    background-color: white;
}

.dropdown {
    display: inline-block;  
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  color: black;
  padding: 15px;
  text-decoration: none;
  display: block;
    font-size: 17px;
}

.dropdown-content a:hover {
    background-color: #ebebeb;
    transition: .1s;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<div class="navbar">
  <div>
    <a href="#home" class="logo">LOGO</a>
    <div class="w3-right smallScreen">
        <a href="index.html" class="rightNav">HOME</a>
        <a href="director.html#slider-image-1" class="rightNav">DIRECTOR OF BANDS</a>
        <div  class="dropdown">
        <a href="#contact" class="rightNav dropdown dropbtn">MARCHING BAND</a>
          <div class="dropdown-content">
              <a href="#">MARCHING BAND</a>
              <a href="#">STAFF</a>
              <a href="#">MUSIC</a>
              </div>
            </div>
        <a href="#contact" class="rightNav">CONCERT BAND</a>
        <a href="#contact" class="rightNav">JAZZ BAND</a>
        <a href="#contact" class="rightNav">CLASSES</a>
        <a href="#contact" class="rightNav">MEDIA</a>
        <a href="#contact" class="rightNav">CONTACT US</a>
    </div>

Answer 1

Антонио.

Я попытался воспроизвести ваш код, чтобы устранить неполадки, но CSS плохо вставлен, поэтому я не смогу дать вам полную картину прямо сейчас.

Если я правильно понимаю, проблема, с которой вы столкнулись, заключается в том, что раскрывающееся содержимое не ведет себя как таковое, а просто отображается как ссылки на панели навигации. Верно?

Если это так, я бы отослал вас к https://www.w3schools.com/howto/howto_js_dropdown.asp, так как вам понадобится JavaScript, чтобы он работал. Там есть аккуратный код, готовый к использованию. Кроме того, я настоятельно рекомендую вам не использовать пробелов ни в одном из имен классов в вашем HTML, поскольку становится совершенно невозможно ссылаться на них позже в вашем коде CSS.