Элемент ведет себя как блок, несмотря на то, что он встроен в блок

Question

Я хочу, чтобы у моего priority-menu (с двумя точками) отображались 3 точки по горизонтали.Поскольку каждая отдельная точка inline-block, я не понимаю, почему они расположены друг над другом.Меню отображается при нажатии на синий кружок справа от кнопки «Сохранить задачу», который меняет свое отображение на inline вместо none.Я попытался изменить это значение на inline-block и, похоже, ничего не изменилось.

/* The popup menu - hidden by default */
#priority-menu {      
    display: none;
    position: absolute;
    top: 150%;    
    border: 3px solid #f1f1f1;
    z-index: 9;    
    max-width: 300px;    
    padding: 10px;
    background-color: white;          
}

#priority-dot-open-menu { 
    position: relative;   
    height: 25px;
    width: 25px;
    background-color: blue;
    border-radius: 50%;    
    display: inline-block;
    opacity: 0.8;
    cursor: pointer;    
}

#priority-dot-open-menu:hover {
    opacity: 1;
}


#priority-dot-blue {
    height: 25px;
    width: 25px;
    background-color: blue;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.8;    
}

#priority-dot-yellow {
    height: 25px;
    width: 25px;
    background-color: yellow;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.8;    
}

#priority-dot-red {
    height: 25px;
    width: 25px;
    background-color: red;
    border-radius: 50%;
    display: inline-block;
    opacity: 0.8;    
}

.modal-footer {
    padding: 0;
}


#priority-menu::after {
    content: " ";
    position: absolute;
    bottom: 100%;  /* At the top of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
  }

<div class="modal-footer d-flex flex-row justify-content-start pl-0 mt-4 border-0">
  <button type="button" class="btn btn-primary btn-sm" id="add-task-modal-save">Save task</button>
  <span id="priority-dot-open-menu">
  <span id="priority-menu">
  <span class="tooltip-top"></span>
  <span id="priority-dot-blue"></span>
  <span id="priority-dot-yellow"></span>
  <span id="priority-dot-red"></span>
  </span>
  </span>
</div>

Answer 1

Ваш priority-menu содержится в элементе, для которого вы установили ширину 25 пикселей.Попробуйте удалить это и изменить на 300px, как ваш priority-menu.

#priority-dot-open-menu { 
    position: relative;   
    height: 25px
    width: 300px;
    background-color: blue;
    border-radius: 50%;    
    display: inline-block;
    opacity: 0.8;
    cursor: pointer;    
}

Вы также можете попробовать добавить объявленное width в ваше меню вместо max-width.

#priority-menu {
    width:300px;
}