Title: Выпадающий список и шорткод
Last modified: 24.07.2022

---

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

 *  [intman1958](https://ru.wordpress.org/support/users/intman1958/)
 * (@intman1958)
 * [4 года, 2 месяца назад](https://ru.wordpress.org/support/topic/%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b8%d0%b9-%d1%81%d0%bf%d0%b8%d1%81%d0%be%d0%ba-%d0%b8-%d1%88%d0%be%d1%80%d1%82%d0%ba%d0%be%d0%b4/)
 * Вот так список
    Вёрстка
 *     ```
       <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;
       }
       ```
   
 * Все [нормально открывается,](https://cpt.intman.net/%d1%81%d0%bf/) как и задумано.
   
   Однако если если к этому списку добавить иконки из плагина Font Awesome Icon,
   раскрывающейся список исчезает. Как же присоединить иконки?
    -  Тема изменена 4 года, 2 месяца назад пользователем [intman1958](https://ru.wordpress.org/support/users/intman1958/).
    -  Тема изменена 4 года, 2 месяца назад пользователем [intman1958](https://ru.wordpress.org/support/users/intman1958/).
 * Страница, с которой нужна помощь: _[[войдите](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fru.wordpress.org%2Fsupport%2Ftopic%2F%25D0%25B2%25D1%258B%25D0%25BF%25D0%25B0%25D0%25B4%25D0%25B0%25D1%258E%25D1%2589%25D0%25B8%25D0%25B9-%25D1%2581%25D0%25BF%25D0%25B8%25D1%2581%25D0%25BE%25D0%25BA-%25D0%25B8-%25D1%2588%25D0%25BE%25D1%2580%25D1%2582%25D0%25BA%25D0%25BE%25D0%25B4%2F%3Foutput_format%3Dmd&locale=ru_RU),
   чтобы увидеть ссылку]_

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

 *  [fevenili](https://ru.wordpress.org/support/users/fevenili/)
 * (@fevenili)
 * [4 года, 2 месяца назад](https://ru.wordpress.org/support/topic/%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b8%d0%b9-%d1%81%d0%bf%d0%b8%d1%81%d0%be%d0%ba-%d0%b8-%d1%88%d0%be%d1%80%d1%82%d0%ba%d0%be%d0%b4/#post-12222890)
 * Попробуйте так:
 * Верстка
 *     ```
       <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)

 Тема «Выпадающий список и шорткод» закрыта для новых ответов.

 * Форум: [Темы и шаблоны](https://ru.wordpress.org/support/forum/themes-and-templates/)
 * 1 ответ
 * 2 участника
 * Последний ответ: [fevenili](https://ru.wordpress.org/support/users/fevenili/)
 * Последняя активность: [4 года, 2 месяца назад](https://ru.wordpress.org/support/topic/%d0%b2%d1%8b%d0%bf%d0%b0%d0%b4%d0%b0%d1%8e%d1%89%d0%b8%d0%b9-%d1%81%d0%bf%d0%b8%d1%81%d0%be%d0%ba-%d0%b8-%d1%88%d0%be%d1%80%d1%82%d0%ba%d0%be%d0%b4/#post-12222890)
 * Статус: нерешённая

## Темы

### Самые популярные темы

### Темы без ответов

### Без вопроса

### Решённые

### Нерешённые

### Все темы