При наведении на иконку выводить дропдаун

102

08 августа 2021, 13:30

Список в котором три пункта:

При клике на выбранный элемент списка рядом с заголовком списка появляется иконка. Делал это с помощью css.

.nav-pills .nav-link.active:after { 
  content: "☰"; 
}

<ul class="nav nav-pills flex-column flex-sm-row dev-cat" role="tablist"> 
  <li class="nav-item waves-effect waves-light"> 
    <a class="nav-link active" data-toggle="tab" href="#last" role="tab"><i class="ti-bolt"></i>&nbsp;&nbsp;Популярное&nbsp;&nbsp;</a> 
  </li> 
  <li class="nav-item waves-effect waves-light"> 
    <a class="nav-link" data-toggle="tab" href="#comment" role="tab"><svg style="margin-top: -2px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 17" id="reply" width="16" height="16"><g fill="currentColor" fill-rule="evenodd"><path d="M14.802.024H3.147C1.412.024 0 1.415 0 3.126v7.087c0 1.71 1.412 3.102 3.147 3.102h7.423l3.358 3.24a.75.75 0 0 0 1.27-.539V13.29c1.55-.192 2.75-1.5 2.75-3.077V3.126c0-1.71-1.41-3.102-3.146-3.102zm1.888 10.189c0 1.026-.847 1.861-1.888 1.861h-.233a.625.625 0 0 0-.629.62v2.188l-2.664-2.626a.634.634 0 0 0-.445-.182H3.147c-1.041 0-1.888-.835-1.888-1.861V3.126c0-1.026.847-1.861 1.888-1.861h11.655c1.041 0 1.888.835 1.888 1.86v7.088z"></path><path d="M13.607 4.417H4.342a.625.625 0 0 0-.63.62c0 .343.283.62.63.62h9.265a.624.624 0 0 0 .629-.62.625.625 0 0 0-.63-.62zm0 3.474H4.342a.625.625 0 0 0-.63.62c0 .344.283.621.63.621h9.265a.624.624 0 0 0 .629-.62.625.625 0 0 0-.63-.62z"></path></g></svg>&nbsp;&nbsp;Обсуждаемое&nbsp;&nbsp;</a></li> 
  <!--<li class="nav-item waves-effect waves-light"><a class="nav-link" data-toggle="tab" href="#plus18" role="tab"><i class="ion-checkmark-round"></i>&nbsp;&nbsp;Выбор редакции </a></li> --> 
  <li class="nav-item waves-effect waves-light"> 
    <a class="nav-link " data-toggle="tab" href="#power" role="tab"><img src="<?php echo FRONTEND_PATH; ?>/images/plus-head.svg" width="17" height="17">&nbsp;&nbsp;Сила мысли&nbsp;&nbsp;</a> 
  </li> 
</ul>

При наведении на иконку необходимо чтобы появлялся дропдаун:

<select id="comboA" onchange="getTimeViews(this)">
    <option value="hour">за час</option>
    <option value="day">за день</option>
    <option value="week">за неделю</option>
    <option value="year">за все время</option>
</select>

Сорри за количество кода. Заранее спасибо.

Answer 1

Кнопку можно заменить на любой другой символ или иконку. Концепция такая же.

.dropbtn { 
  background-color: blue; 
  color: white; 
  padding: 16px; 
  font-size: 16px; 
  border: none; 
} 
 
.dropdown { 
  position: relative; 
  display: inline-block; 
} 
 
.dropdown-content { 
  display: none; 
  position: absolute; 
  background-color: #f1f1f1; 
  min-width: 160px; 
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
  z-index: 1; 
} 
 
.dropdown-content a { 
  color: black; 
  padding: 12px 16px; 
  text-decoration: none; 
  display: block; 
} 
 
.dropdown-content a:hover {background-color: lightblue;} 
 
.dropdown:hover .dropdown-content {display: block;} 
 
.dropdown:hover .dropbtn {background-color: lightblue;}

<div class="dropdown"> 
  <button class="dropbtn">Выпадающее меню</button> 
  <div class="dropdown-content"> 
    <a href="#">Link 1</a> 
    <a href="#">Link 2</a> 
    <a href="#">Link 3</a> 
  </div> 
</div>