Html css菜单中除最后一个子元素外的所有元素都向左移动一个像素

我在这儿把头发扯下来。 我在我正在建设的网站上有水平下拉菜单。菜单由无序列表组成，下拉部分由隐藏的子元素组成，当您滚动父元素时，这些子元素会弹出。 在Firefox中，一切看起来都很好，但在Chrome和Safari中，虽然每个菜单中的最后一个子元素都按预期运行，但所有其他子元素都被向左分流一个像素。因此，在下面的示例中，子A3、子B4和子C2与其各自的父母完全一致，而其余的则不一致。 有人能解释一下这里出了什么问题吗？ 下面的代码和屏幕截图

我已经包括了CSS的整个导航块，以防我遗漏了实际父/子部分之外的内容

HTML

---

不确定确切的原因是什么，但这与以下事实有关：

中的列表项是内联块，而ul本身是居中的

因此，有两种解决方案：要么将ul向左对齐，而不是将其居中

.children {text-align:left;}

或者，使其列表项块而不是内联块

.children > li {display:block;}

---

这些调整中的任何一个都将消除显示异常。在这两种情况下，您还必须增加左边距，但我确信这不会是一个问题。

将

.children.page\u项目

更改为

显示：块

，而不是

显示：内联块

似乎可以在我的Chrome浏览器中修复它。这也需要更多的余量来重新调整

.children .page_item {
 display:block;
margin-left:10px;
}

---

你有一个JSFIDLE演示吗？或者你能给我们一个实际页面的链接吗？如果它被发布了，你能给我们一个链接吗？我一定是在JSFIDLE中做了些错事，因为它到处都是。谢谢李斯特先生，这很有效。我现在可能会留着一些头发度过这一天：）

.children > li {display:block;}

.children .page_item {
 display:block;
margin-left:10px;
}