css - 根据内容使 ul 增加宽度

Question

我在 this site 中实现了 super 鱼菜单

如果您将鼠标悬停在产品菜单上，下拉菜单的宽度将正好是主父菜单的宽度，即使内容更大也是如此。如何根据其中的内容使菜单变宽。现在内容简直溢出来了。

Answer 1

将以下样式添加到您的 grid.css 或 grid.css 之后的任何其他 .css 文件/ header :

.sf-menu ul{
    min-width:100%; /* at least the size of the header */
    width:auto; /* size the block automatically */
}
.sf-menu ul li{
    white-space:nowrap; /* prevent word wrap */
}

请注意，这在 IE7 中不会产生相同的结果，但是您的网站在 IE7 中的显示方式有所不同。适用于 IE8、IE9 和 Firefox 10(应适用于所有 CSS2 兼容浏览器)。