Выпадающий список и шорткод

  • intman1958

    (@intman1958)


    2 года, 4 месяца назад

    Вот так список
    Вёрстка

    <div class="dropdown">
    <span>Airtime & Internet Data</span>
  </div><br>
   <div class="dropdown">
  <span>Alcohol, Wine & Beers</span>
  <div class="dropdown-content">
    <p>Beer & Cider</p>
    <p>Brandy & Cognac</p>
    <p>Brandy & Cognac</p>
    <p>Gin & Rum</p>
    <p>Liqueurs & Other Spirits</p>
    <p>Non-Alcoholic Beer</p>
    <p>Vodka & Tequila</p>
    <p>Whisky</p>
    <p>Wines</p>
  </div>
</div><br>
 <div class="dropdown">
    <span>Audio Speakers & Headphones</span>
  </div><br>

    Стили

    .dropdown {
    position: relative;
    display: inline-block;
}

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

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

    Все нормально открывается, как и задумано.
    Однако если если к этому списку добавить иконки из плагина Font Awesome Icon, раскрывающейся список исчезает. Как же присоединить иконки?

    • Тема изменена 2 года, 4 месяца назад пользователем intman1958.
    • Тема изменена 2 года, 4 месяца назад пользователем intman1958.

    Страница, с которой нужна помощь: [войдите, чтобы увидеть ссылку]

Просмотр 1 ответа (всего 1)
  • fevenili

    (@fevenili)

    2 года, 4 месяца назад

    Попробуйте так:

    Верстка

    
<div class="dropdown">
 <span><i class="fas fa-list"></i>Airtime & Internet Data</span>
</div>

<div class="dropdown">
 <span><i class="fas fa-list"></i>Alcohol, Wine & Beers</span>
 <div class="dropdown-content">
  <p><i class="fas fa-list"></i>Beer & Cider</p>
  <p><i class="fas fa-list"></i>Brandy & Cognac</p>
  <p><i class="fas fa-list"></i>Brandy & Cognac</p>
  <p><i class="fas fa-list"></i>Gin & Rum</p>
  <p><i class="fas fa-list"></i>Liqueurs & Other Spirits</p>
  <p><i class="fas fa-list"></i>Non-Alcoholic Beer</p>
  <p><i class="fas fa-list"></i>Vodka & Tequila</p>
  <p><i class="fas fa-list"></i>Whisky</p>
  <p><i class="fas fa-list"></i>Wines</p>
 </div>
</div>

<div class="dropdown">
 <span><i class="fas fa-list"></i>Audio Speakers & Headphones</span>
</div>

    Стили

    
.dropdown {
 position: relative;
 display: block;
}

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

.dropdown:hover .dropdown-content {
 display: block;
}
Просмотр 1 ответа (всего 1)
  • Тема «Выпадающий список и шорткод» закрыта для новых ответов.