Рей Достоевский

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

Предлагаю сделать вам список информации, которую нужно отображать, и задать такие значения в css:

.yourBlock{
    position: absolute;
    right: -1000px;
}
.yourWord:hover .yourBlock:
    right: 0px;

Можно еще указать, положение слова.

Не уверен, но возможно может помочь
z-index. Примени к выпадающей информации 1, а к блоку 0. Опять-же, не уверен.

Добавить каждому отдельный class или id.
В css уже обращаться к каждому по отдельности.
Если писать на css, - будет долго. Лучше используй JS или Python, уже до тебя должно было быть сделано)

Удачи! =)

Попробуй align-items: center; Не поможет - дай родителю display: flex; в css.
Еще можно сделать position: absolute; и управлять top и left.
Удачи =)

Есть блок с классом "block", есть список li "list"
В css:

.block{
    display: block;
    position: relative;
}
.list{
    display: none;
    position: absolute;
    top: 0;
    left: 0;
}
.block:hover .list{
    display: block
}

Возможно ещё .block::hover, если не сработает.
Также, можно с помощью паддингов, но это уже совсем другая история)