На парениях эффект подкатегории шоу и сползание к правой стороне

Question

То, что я хочу есть, когда курсор мыши находится в списке категорий, показать подкатегорию и сползание к правой стороне, так же, как в daraz.pk и JSFiddle

Answer 1

добавить следующий класс в ваш CSS, чтобы показать меню при наведении. Теперь вам нужно также отредактировать класс дочернего UL.

.category_menu li:hover ul{ 
    display:block; 
} 
.right_sliding { 
display: none; 
position: absolute; 
left: 40%; 
top: 0; 
background: #ffffff; 
width: 100px; 
margin-left: 20px; 

}

Answer 2

\t .category_menu { 
 
    list-style-type: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    width: 200px; 
 
} 
 
.category_menu > li { 
 
    border-bottom: 1px solid; 
 
    float: left; 
 
    padding: 9px 10px; 
 
    width: 100%; 
 
    position:relative; 
 
} 
 
.right_sliding { 
 
    display: none; 
 
} 
 
.category_menu li a { 
 
    color: #000; 
 
    font-size: 14px; 
 
    text-decoration: none; 
 
} 
 
.fa.fa-arrow-right { 
 
    float: right; 
 
    font-size: 10px; 
 
    margin: 7px 0 0; 
 
} 
 
.category_menu > li > ul { 
 

 
    position: absolute; 
 
    position: absolute; 
 
    right: -69px; 
 
    top: 6px; 
 
} 
 
.category_menu > li:hover > ul { 
 
display:block; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"> 
 
<ul class="category_menu"> 
 
<li> 
 
    <a href="#"> 
 
    <span class="icone fa fa-female"></span> 
 
    <span class="cat_name">Womens Fashion</span> 
 
    <span class="fa fa-arrow-right"></span> 
 
    </a> 
 
    <ul class="right_sliding"> 
 
    <li> 
 
    <a href="#">Women1</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Women1</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Women1</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Women1</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Women1</a> 
 
    </li> 
 
    </ul> 
 
</li> 
 
<li> 
 
    <a href="#"> 
 
    <span class="icone fa fa-male"></span> 
 
    <span class="cat_name">Men Fashion</span> 
 
    <span class="fa fa-arrow-right"></span> 
 
    </a> 
 
    <ul class="right_sliding"> 
 
    <li> 
 
    <a href="#">Men</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Men</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Men</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Men</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Men</a> 
 
    </li> 
 
    </ul> 
 
</li> 
 
<li> 
 
    <a href="#"> 
 
    <span class="icone fa fa-mobile"></span> 
 
    <span class="cat_name">Phones</span> 
 
    <span class="fa fa-arrow-right"></span> 
 
    </a> 
 
    <ul class="right_sliding"> 
 
    <li> 
 
    <a href="#">Phones</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Phones</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Phones</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Phones</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Phones</a> 
 
    </li> 
 
    </ul> 
 
</li> 
 
<li> 
 
    <a href="#"> 
 
    <span class="icone fa fa-home"></span> 
 
    <span class="cat_name">Home Appliences</span> 
 
    <span class="fa fa-arrow-right"></span> 
 
    </a> 
 
    <ul class="right_sliding"> 
 
    <li> 
 
    <a href="#">Home</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Home</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Home</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Home</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Home</a> 
 
    </li> 
 
    </ul> 
 
</li> 
 
<li> 
 
    <a href="#"> 
 
    <span class="icone fa fa-desktop"></span> 
 
    <span class="cat_name">Computing</span> 
 
    <span class="fa fa-arrow-right"></span> 
 
    </a> 
 
    <ul class="right_sliding"> 
 
    <li> 
 
    <a href="#">Computing</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Computing</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Computing</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Computing</a> 
 
    </li> 
 
    <li> 
 
    <a href="#">Computing</a> 
 
    </li> 
 
    </ul> 
 
</li> 
 
</ul>

Answer 3

Следующий пример использует JQuery, чтобы захватить индекс li элемента, завис над и отображает подменю с соответствующим индексом:

https://jsfiddle.net/pdgxuvse/4/

---

Я думаю, что вы на правильном пути, вложив подменю рядом с элементом, который вы наводите на дисплей, хотя ... поэтому, возможно, не обращайте внимания на эту часть.

В этом случае вы захотите захватить родительский элемент, а затем элемент подменю в нем и не учитывать значение переменной индекса.

Может дать, что выстрел и не стесняйтесь попросить о помощи :)