Html 在两列中显示列表项

若你们在代码片段或[js FIDLE]下面运行，若我们将鼠标移到第二张图片上，你们可以看到apple1到Apple12的值。但是我想在一列中显示苹果1-7，在另一列中显示苹果8-12。

现在：

我需要的是：

#按列表缩小{显示：无；}
.选择1
{ 
文本转换：大写；
文本对齐：居中；
字体大小：粗体；
字号：18px；
颜色：#000000；
}
.links1234{颜色：#908983；}
.links1234:悬停{color:#f85700；}
.成长{
填充物：5px 5px 5px；
边界半径：10px；
宽度：23%；
利润率：5px1%5px1%；
浮动：左；
位置：相对位置；
过渡：高度0.5s；
-webkit过渡：高度0.5s；
文本对齐：居中；
背景色：#fff；
}
.grow:hover-ul{
显示：块；
}
.成长{
保证金：0；
填充物：5px；
列表样式：无；
显示：无；
位置：绝对位置；
z指数：1；
背景：#fff；
盒影：0.5px1pRGBA（0,0,0,25）；
左：0；
右：0；
}
.成长img{
宽度：100%；
}
扩大
{
位置：相对位置；
右：8px；
顶部：4px；
}

使用中的

列计数属性。
使用下面的css

.grow:hover ul{
  display: block;
  column-count: 2;
}
.grow:hover ul li{
    display: inline-table;
    padding: 5px 12px;
}

检查一下@LaljiTadhani的可能副本当我使用链接代码时，它显示如下：，意味着它在不同的列中显示所有菜单，这很好，但同时它也应该增加列宽，但这并没有发生…@Laljitadani请检查此项并帮助我：现在我想增加列宽更改列数3/2现在它的显示方式是这样的：在这个链接中，您可以帮助我显示为有问题的第二个图像…它适用于所有图像，意味着如果您将鼠标悬停在任何图像上，值将显示在两列中，但我不想这样，我想在2列只有当图像有更多的值，请鼠标在其他图像上也在上面的链接后，我用这个代码，现在第一个图像也值显示在2列：请帮助我有很多。您是否尝试过旧版本的mode？