Поддержка Темы и шаблоны Выпадающий список и шорткод

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

    <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, раскрывающейся список исчезает. Как же присоединить иконки?

    • Тема изменена 3 недели назад пользователем intman1958.
    • Тема изменена 3 недели назад пользователем intman1958.

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

Просмотр 1 ответа (всего 1)
  • Попробуйте так:

    Верстка

    
    <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)