CSS-Как отобразить панель при наведении тега i

Question

Я хочу открыть всплывающую панель, когда пользователь наводит курсор на значок корзины покупок, например этот пример из W3Schools .

Это похоже на входящие сообщения SO:

Я пытался этот код , но похоже, что я что-то упустил.

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

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

<i class="fa fa-shopping-cart w3-margin-right dropdown" onmouseover="javascript:void(0)"></i>
<div class="dropdown-content"><p>This is a test</p></div>
<i class="fa fa-search"></i>

Answer 1

Вы также можете использовать «+» или «~», как показано ниже:

.dropdown:hover + .dropdown-content {
    //your css code
}
.dropdown:hover ~ .dropdown-content {
    //your css code
}

Answer 2

Вам нужен знак +, так как это элемент одного уровня.

Попытка добавить css:

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

Рабочая скрипка: https://jsfiddle.net/jennifergoncalves/zy0m1w32/2/

(используется)Здравствуйте ", так как у меня не загружен шрифт awesome)

Ссылка: https://www.w3schools.com/css/css_combinators.asp

Пробелы используются для отношений между родителями и детьми.

ОБНОВЛЕНИЕ: После разговора вв чате HTML-код, заданный в вопросе, не совпадает с фактическим кодом.

Фактический HTML-код:

<p class="w3-right">
    <i class="fa fa-shopping-cart w3-margin-right dropdown" onmouseover="javascript:void(0)"></i>
</p>
<div class="dropdown-content">
    <p> This is a test</p>
</div>

Селектор брата не работает, поскольку "выпадающий список" и "выпадающий список -содержание "на самом деле не были братьями и сестрами.Добавление класса «выпадающий» в тег «p», похоже, решило проблему.