Css 悬停时WordPress子菜单项未正确显示

我在以下站点的子菜单项上遇到问题。事实上，问题在于子菜单项，即第三级项目（我不确定这些项目的实际名称）

您可能需要前端密码才能查看“calzada321”（无引号）

根据屏幕截图（下面的链接），在大多数浏览器中，第三级项目被压扁，即它们不会以吸引人或有用的方式在悬停时显示。我不知道如何修复（显然）。谢谢你的帮助

/*2.3导航
------------------------------------------------------------------------------*/
#航行{
边缘底部：7px；
位置：相对位置；
z指数：2；
}
#导航.菜单项{
浮动：左；
背景：url（../images/common/bg_nav-separator.png）无重复0中心；
位置：相对位置；
}
#导航。菜单项：第一个子项{
背景：无；
}
#导航。菜单项。有子菜单：悬停{
背景色：#e5eaef；
}
#导航。菜单项a{
颜色：#002d62；
显示：块；
字体大小：15px；
/*字体大小：粗体*/
填充：18px 17px 18px 16px；
文本转换：大写；
}
#导航。菜单项：第一个子a{
左：3倍；
}
#导航。当前菜单项>a，
#导航。当前页面>a，
#导航。菜单项a：悬停{
颜色：#c72932；
文字装饰：无；
}
#导航。有子菜单。当前页面>a{
颜色：#002e62；
}
#导航。有子菜单。当前页面>a:悬停{
颜色：#fcb040；
文字装饰：无；
}
/*副导航*/
#导航子菜单{
显示：无；
位置：绝对位置；
顶部：50px；
左：0；
填充：17px 22px 18px；
宽度：155px；
背景：#e5eaef；
}
#导航。菜单项。有子菜单：悬停。子菜单{
显示：块；
}
/*---我在下面添加了此项，使子项显得更重要，但仍然不好---*/
#导航。菜单项。有子菜单：悬停。子菜单。子菜单{
左边距：200px；
利润上限：-35px；
显示：块；
}
#导航.子菜单.菜单项{
浮动：无；
左侧填充：12px；
边缘底部：5px；
背景：透明url（../images/common/sprite_icons.png）不重复1px-229px；
}
#导航.子菜单.菜单项a{
填充：0；
字体大小：正常；
线高：40px；
文本转换：无；
}

css代码中存在一些问题，例如悬停操作。首先，您应该使用直接子选择器来显示子菜单，这样第三级将保持隐藏状态

.menu-item:hover > .sub-menu{ display: block }

最后是针对您的问题，从第三级开始为子菜单添加样式。只需将left属性设置为0

.sub-menu .sub-menu{ left: 0 }

根据代码片段编辑答案

您可以将用于显示子菜单的选择器更改为此

#navigation .menu-item:hover > .sub-menu { display: block }

此选择器将仅显示直接子菜单，而不是一个菜单项中的所有子菜单。而且，您不需要设置“上边距”或“左边距”

接下来需要为第三级菜单添加样式，因为该菜单位于左侧

#导航。子菜单。子菜单{ 左：100%； 排名：0； }

---

由于子菜单是绝对定位的，您只需将左侧设置为100%，这将使第三级菜单位于选定的第二级菜单旁边

您可以发布创建这些菜单的HTML/CSS吗？这当然是一个定位问题，但是如果没有看到标记，就很难给出一个好的答案。我检查了你的代码。您的CSS有问题。我已将代码片段添加到原始EntryThank中，但我无法使其正常工作。也许我上面添加的代码片段可以帮助您？非常感谢您的帮助。@Seamus检查我的更新答案，我想您仍然不知道如何使用直接选择器。太好了，非常感谢您。这很有效。诀窍是添加您建议的内容并删除

#navigation.menu项。has子菜单：hover.sub-menu{display:block；}/*---我在下面添加了此项，使子菜单坐得更多，但仍然不好---*/#navigation.men项。has子菜单：hover.sub menu.sub-menu{margin left:200px；margin top:-35px；display:block；}