使ul根据内容增加宽度

Question

我在this site 中实现了超级鱼菜单

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

Answer 1

将以下样式添加到您的 grid.css 或 grid.css 之后的任何其他 .css 文件/标题中：

.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 的浏览器）。