Для создания всплывающего списка в CSS можно использовать псевдоэлемент ::before или ::after в сочетании с свойством content. Также можно использовать свойство position и значение absolute.

HTML:

<button>Показать список</button>

<ul class="popup">
  <li>Пункт #1</li>
  <li>Пункт #2</li>
  <li>Пункт #3</li>
</ul>

CSS:

.popup {
  display: none;
  position: absolute;
  background-color: #fff;
  box-shadow: 0 0 5px 0 rgba(0,0,0,0.3);
  padding: 10px;
  z-index: 1;
}

button:hover + .popup {
  display: block;
}

В этом примере мы создаем кнопку и список, который будет появляться при наведении курсора на кнопку. Для этого мы используем правило CSS, которое применяется к списку при наведении на кнопку с помощью смежного селектора (+).

Список имеет свойство display:none; по умолчанию, чтобы он был скрыт до того, как пользователь наведёт на кнопку. Затем мы добавляем свойство position: absolute; для размещения списка относительно видимой области страницы и устанавливаем фоновый цвет, тень и отступы.

Чтобы список появлялся, когда пользователь наводит курсор на кнопку, мы используем псевдоэлемент :hover для кнопки и задаем свойство display: block; для списка .popup.

Когда вы наведете курсор на кнопку, список должен появиться рядом с кнопкой. Если вы хотите настроить цвета, шрифты и стили текста, вы можете добавить дополнительные правила стиля для списка.