Question

在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。

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

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（这是你的目标与li的宽度无关，除非它们的大小基于百分比。

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

3 个答案: