Javascript 固定列表绝对定位（由于z索引和位置，li'；被隐藏）

问题是，当用户悬停一个li时，它使li的宽度占屏幕的100%，所以li需要绝对定位才能越过同一行上的另一个li，但在这个列表中，我想要6个或更多的子项，当我添加其他li时，它崩溃。救命啊

它必须看起来像这样（全屏幕50%宽度李的）

我一行只想要两个李。（并非全部），5行（每行10 li，2 li…）

JSFIDDLE：

$（函数（）{
$（'.leftchild'）.hover（函数（）{
$（'.left'）.css（“z-index”，“2”）；
$（'.left'）.css（“宽度”，“100%”）；
}，函数（）{
$（'.left'）.css（“z-index”，“0”）；
$（'.left'）.css（“宽度”，“50%”）；
});
$（'.rightchild'）.hover（函数（）{
$（'.right'）.css（“z-index”，“2”）；
$（'.right'）.css（“宽度”，“100%”）；
}，函数（）{
$（'.right'）.css（“z-index”，“0”）；
$（'.right'）.css（“宽度”，“50%”）；
});
函数getCurrentScroll（）{
返回窗口.pageYOffset；
}
});
$（文档）.ready（函数（）{
函数集设置（）{
windowWidth=$（window.width（）；
windowHeight=$（window.height（）；
宽度=（（50*窗宽）/100）*50）/100；
marginleft=（（（50*窗宽）/100）*50）/100）/2；
margintop=（（50*窗高）/100）*50）/100；
numitems=$（“.li”）。长度；
var myheight=（numitems*75）；
$（'.leftchild'）.css（'width'，width）；
$（'.leftchild'）.css（'marginLeft'，marginLeft）；
$（'.leftchild'）.css（'marginTop'，marginTop）；
$（'.rightchild'）.css（'width'，width）；
$（'.rightchild'）.css（'marginRight'，marginleft）；
$（'.rightchild'）.css（'marginTop'，marginTop）；
};
设置设置（）；
$（窗口）。调整大小（函数（）{
设置设置（）；
});
});
body，html{
保证金：0；
填充：0；
身高：100%；
背景：白色；
}
#理由{
宽度：100%；
浮动：左；
保证金：0；
高度：自动；
填充：0；
背景：#f7f2ee；
}
.幻灯片{
列表样式类型：无；
填充：0；
宽度：100%；
身高：100%；
位置：相对位置；
保证金：0；
}
李先生{
高度：100vh；
宽度：50%；
背景重复：无重复；
背景位置：中心；
背景附件：固定；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
位置：相对位置；
浮动：左；
过渡：全部。4s线性；
位置：绝对位置；
宽度：100%；
z指数：0；
}
.幻灯片李：第n个孩子（偶数）{
z指数：1；
背景附件：封面；
宽度：50%；
右：0；
}
.幻灯片李：第n个孩子（偶数）摘要{
宽度：300px；
右边距：200px；
颜色：白色；
文本对齐：居中；
浮动：对；
}
李：第n个孩子（3）{
利润率最高：50%；
}
.li摘要{
颜色：白色；
浮动：左；
文本对齐：居中；
游标：默认值；
}
.幻灯片li摘要h2{
字体系列：“Proxima Nova Bold”；
字体大小：48px；
文本转换：大写；
字母间距：20px；
利润率：10%0；
}
.幻灯片李摘要p{
宽度：100%；
字体大小：16px；
文本对齐：居中；
字体系列：“安达达”；
字体大小：正常；
字体：斜体；
不透明度：0.95；
填充：0；
保证金：0；
}



测试1
测试描述



测试2
测试描述



测试3
测试描述



测试4
测试描述



测试5
测试描述



测试6
测试描述



测试7
测试描述



测试8
测试描述



测试9
测试描述



测试10
测试描述



不要使用单个无序列表，而是使用两个无序列表在单独的无序列表中保留偶数和奇数元素，并将列表的显示属性设置为“inline block”@BrijeshGajjar谢谢。那是个好主意。