html - 文本溢出不适用于响应式菜单中的链接

Question

我有这个超级菜单，其中一些链接的名称很长，当窗口变小时，较长的链接会与其他列上的文本重叠。ul我在课堂上添加了以下规则，

.sub-menu-lists {
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

我曾尝试将这些规则添加到li课堂上.hover_drop_down，而且.hover_drop_down a这些都没有帮助。

重叠消失了，但链接被切断了。我无法显示省略号。我希望他们拖到专栏的末尾。

这是我的codepen，进入软件菜单会显示问题。关于如何做到这一点的任何建议？

https://codepen.io/iamgonge/full/egqPQR

标签： htmlcssresponsive-designmedia-queries

Answer 1

您必须将这些设置分配给li元素，而不是ul像您所做的那样。所以，这就是这个选择器：

ul.main-nav > li ul.sub-menu-lists > li {...}