懸停效果子類別顯示和幻燈片向右側

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/

---

我覺得你在正確的軌道上嵌套子菜單旁邊的元素，你懸停在顯示它，雖然......所以也許無視這一部分。

在這種情況下，您需要抓取元素的父元素，然後抓取其中的子菜單元素，並忽略索引變量。

也許給一個鏡頭，並隨時尋求幫助:)