Wordpress中下拉菜单的样式设计问题

Question

在Wordpress中，我试图为.primary-menu中使用的下拉菜单设置样式。不幸的是，事情并没有按计划进行。

我在Chrome中复制了检查器中的HTML，消除了href和id等杂乱的内容，并试图在jsFiddle：https://jsfiddle.net/1cL8fq8b/1/中调试它。

当在“结果”选项卡中的最后一个item上徘徊时，.sub-item似乎获得了它的父级的宽度。我给了.sub-menu一个绝对的位置，让它独立。不过，我还是不能让.sub-item拥有自己的宽度。这是一个屏幕截图，让你看得更清楚。

如何使子项具有自己的宽度，而不依赖于它的父级宽度？

Answer 1

您可以添加一个负margin-left样式来将下拉菜单扩展到左侧。

.sub-menu {
        position: absolute;
        right: 0;
        display: none;
        margin-left:-100px;
}

参见：https://jsfiddle.net/jokbd6L5/

或为下拉列表定义自定义宽度：

.sub-menu {
        position: absolute;
        right: 0;
        display: none;
        width:100px;
}

参见：https://jsfiddle.net/hjoctv5x/

因为它的位置是绝对的，所以我认为CSS中没有办法让它根据内容的宽度(可变宽度)展开。但是您可以编写一些javascript来计算每个下拉菜单的最大内容宽度，并相应地设置下拉菜单宽度。

Answer 2

这是因为在悬停时，它的display设置为block。将其设置为inline-block

Answer 3

首先也是最重要的。读这个http://learnlayout.com/position.html

绝对是最棘手的位置值。除了相对于最近的位置祖先(而不是相对于视图端口)外，绝对行为类似于固定。如果一个绝对定位的元素没有定位的祖先，它将使用文档体，并且仍然与页面滚动一起移动。记住，“定位”元素是指其位置不是静态的。

因此，基本上绝对定位只会将其从文档流中删除。

还有..。这段代码..。

&:hover .sub-menu

只针对子菜单。尝试以子菜单的li为目标，给它自己的宽度。子菜单ul (这是您的目标与李的宽度无关，除非它们是基于百分比的大小。)