在 Wordpress 中，我尝试设置.primary-menu 中使用的下拉菜单的样式。不幸的是，事情并没有真正按计划进行。
我从 Chrome 中的检查器中复制了 HTML，并删除了诸如 href 和 id 之类的杂乱无章的内容，并尝试在 jsFiddle 中对其进行调试：https://jsfiddle.net/1cL8fq8b/1/
当悬停在结果选项卡中的最后一个 item 上时，.sub-item 似乎占据了其父级的宽度。我给.sub-menu 一个绝对位置，让它独立。我仍然无法让.sub-item 拥有它自己的宽度。
Here's a screenshot for a better view。
如何使子项具有自己的宽度，而不依赖于其父项的宽度？
【问题讨论】：
标签： html css wordpress dropdown
您可以添加否定的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 来计算每个下拉菜单的最大内容宽度并相应地设置下拉菜单宽度。
【讨论】：
这是因为在悬停时其display 设置为block。改为inline-block
【讨论】：
首先..阅读此http://learnlayout.com/position.html
absolute 是最棘手的位置值。 absolute 的行为类似于 fixed，除了相对于最近的定位祖先而不是相对于视口。如果一个绝对定位元素没有定位的祖先，它使用文档正文，并且仍然随着页面滚动而移动。请记住，“定位”元素的位置是除静态之外的任何内容。
所以基本上绝对定位只是把它带出文档流
还有..这段代码..
&:hover .sub-menu
仅针对子菜单。尝试定位子菜单的 li 给它自己的宽度。子菜单 ul（这是您的定位与 li 的宽度无关的内容，除非它们的大小是基于百分比。
【讨论】：