как сделать выскакивающее меню с боку при наведении?

Question

Это меню в контенте, фильтр, чтобы при на ведении на category-parent в таком же самом дизайне выскакивало category-children меню справа

<div class="section-filter">
   <div class="section-filter">
      <div class="blog-sb-widget multishopcategories_widget">
         <h3 class="widgettitle">Категории</h3>
         <div class="section-sb-current">
            <ul class="section-sb-list">
               <li>
                  <a href="#"><span class="section-sb-label">Electricity <span class="count">1 product</span></span></a>
               </li>
               <li class="category-parent">
                  <a href="javascript:void(0);"> Electricity2<span class="count">9 product</span></a>
                  <ul class="category-children">
                     <li>
                        <a href="#"><span class="section-sb-label">Electricity1 <span class="count">3</span></span></a>
                     </li>
                     <li>
                        <a href="#"><span class="section-sb-label">Electricity2 <span class="count">3</span></span></a>
                     </li>
                     <li>
                        <a href="#"><span class="section-sb-label">Electricity3 <span class="count">3</span></span></a>
                     </li>
                  </ul>
               </li>
              
            </ul>
         </div>
      </div>
   </div>
</div>

Answer 1

Можно обойтись и без JS:

.section-sb-list  {
  display: inline-block
}

.section-sb-list li {
  position: relative
}

.section-sb-list li > ul {
  position: absolute;
  top: 0;
  right: -50px;
  opacity: 0;
  pointer-events: none;
  transform: translateX(100%);
  transition: all 0.3s ease-in-out;
}

.section-sb-list li:hover > ul {
  opacity: 1;
  pointer-events: all;
  right: 0;
}

<div class="section-filter">
  <div class="section-filter">
    <div class="blog-sb-widget multishopcategories_widget">
      <h3 class="widgettitle">Категории</h3>
      <div class="section-sb-current">
        <ul class="section-sb-list">
          <li>
            <a href="#"><span class="section-sb-label">Electricity <span class="count">1 product</span></span></a>
          </li>
          <li class="category-parent">
            <a href="#"> Electricity2<span class="count">9 product</span></a>
            <ul class="category-children">
              <li>
                <a href="#"><span class="section-sb-label">Electricity1 <span class="count">3</span></span></a>
              </li>
              <li>
                <a href="#"><span class="section-sb-label">Electricity2 <span class="count">3</span></span></a>
              </li>
              <li>
                <a href="#"><span class="section-sb-label">Electricity3 <span class="count">3</span></span></a>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </div>
  </div>
</div>

P/S: Стиль родителя сохранен

БЛОГ НА HUSL

как сделать выскакивающее меню с боку при наведении?

Ответы (1 шт):