Выравнивание выпадающих элементов с помощью кнопки заголовка

Question

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

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

Вот текущий веб-сайт с разделом «Коллекционирование», расположенным чуть ниже главной страницы: https://timeandtimeagain.manakeep.com/

Вот код HTML для блока: https://pastebin.com/mEECfh2T

Вот код CSS для блока:

#artifactsButton p {
     padding: 5px;
     text-align: center;
   }

#floraButton p {
     text-align: right;
     word-wrap: break-word;

  }

 #collectiblesHeader {
   text-align: center;
  }

 #artifactsButton {
   float: left;
      }

 #floraButton {
   float: right;
   padding-right: 10px;
 }

 #lettersButton {
   float: right;
   padding-right: 290px;
 }

 .dropbtn {
   font-size: 28px; 
   border: none;
   outline: none;
   color: white;
   padding: 14px 16px;
   background-color: inherit;
   font-family: inherit; 
   margin: 0; 
 }

 .navbar a:hover, .dropdown:hover .dropbtn {
   background-color: grey;
 }


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

 .dropdown-content a {
   float: none;
   color: black;
   padding: 12px 16px;
   text-decoration: none;
   display: block;
   text-align: left;
 }

.dropdown-content a:hover {
  background-color: #ddd;
 }

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

Answer 1

Первое, что нужно сделать, это установить .dropdown класс position: relative;. Затем вы можете работать с атрибутом absolute.

Пример:

.dropdown {
    position: relative;
}

#artifactsButton .dropdown .dropdown-content {
    left: 0;
    top: 100%;
    min-width: 300px;
}

#lettersButton .dropdown .dropdown-content {
    right: 0;
    top: 100%;
    min-width: 300px;
}

#floraButton .dropdown .dropdown-content {
    top: 100%;
    left: -160px;
    min-width: 300px;
}

В случае #floraButton вам придется установить руководство left, я установил его из своего разрешения.

Это решение, но я рекомендую вам лучше распределить div. С flexbox например.