在悬停效果子类别显示并向右侧滑动

Question

我想要的是，当鼠标光标悬停在类别列表上时，显示子类别并向右侧滑动，与daraz.pk和JSFiddle

相同

Answer 1

以下示例使用jQuery获取正在悬停的li元素的索引，并显示带有相应索引的子菜单：

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

我认为你是在正确的轨道上，将子菜单与你悬停的元素一起嵌套显示它，但是......所以也许可以忽略那部分。

在这种情况下，您需要获取元素的父级，然后获取其中的子菜单元素，并忽略索引变量。

也许可以试一试并随时寻求帮助：）

Answer 2

在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 3

＆＃13;

＆＃13;

	.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;