Css 用鼠标在上面展开整个包装，宽度自动，高度自动

我正在使用一个菜单，它有一个id为“menu_unidades”的rapper。我希望这个div在鼠标悬停时展开后调整其尺寸

这是你的电话号码

我正在使用superfish修改的css

CSS

---

HTML

如果我理解正确，您希望基于鼠标悬停为包装器提供自定义外观吗？ 如果是这样，您可以在mouseenter和mouseleave上添加自定义类：

$('div#menu_unidades').hover(function() {
    $(this).toggleClass('test-class');
});

向测试类css和presto添加您想要的任何内容！你已经有了JQuery的惊人之处。

---

你可以在这里看到这一点

你有一个

css

选择器，

.sf菜单ul

，起初我的印象是它在所有

ul

中添加了

绝对值

然后我将其更改为，
.sf menu>ul
，因此它专门针对
.sf menu
内部的
ul
s

.sf-menu > ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 99;
}

在查看了所有的
css
之后，我不是
100%
确定它为什么会准确地修复它。您的
css
中存在一些类的重复，因此我不确定

它不能正确扩展的一个原因是由于
位置：绝对
的事实。它们被带到元素外部，就好像它根本不在元素内部一样，就像漂浮一样，但更糟

我最好的猜测是，如果没有
，它会将
位置：绝对
应用于类
.sf菜单
。这将使整个nav脱离工作流，并且不会使父级扩展到内容

现在绝对div是相对于
.sf menu
的
li
s的，并且由于
li
是相对定位的，因此父级可以填充它们

下面是看到它实际运行的方法。
像这样吗？是的，乔希·鲍威尔就是这样！您修改了什么，我将有资格成为已接受的答案我现在添加我的答案。：]
.sf-menu > ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 99;
}