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

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

如何使子项目具有自己的宽度，而不依赖于其父对象的宽度？

最佳答案

您可以添加否定的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来计算每个下拉菜单的最大内容宽度，并相应地设置下拉菜单的宽度。

关于html - 在Wordpress中设置下拉菜单样式的问题，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/39881245/