0

我有一个下拉菜单，除了 Internet Explorer 7 外，它运行良好。谢谢 MS。

出于演示目的，我创建了这个简单的 HTML。下拉菜单打开以快速说明问题。在 IE 7 中，下拉菜单被剪切到顶级菜单的宽度。在 IE8 和 IE9 中这不是问题。

我可以通过添加以下 javascript 来解决此问题：

element.style.width = 320px

效果很好，但是我需要像 IE8 或 IE9 那样自动完成，否则我必须分别计算每个下拉菜单的宽度。

下面的 HTML：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        ul.menu {list-style:none;font:10px Trebushet MS;font-weight:bold;margin:0;padding:0;position:absolute;left:86px;top:90px;line-height:100%;height:15px}
        ul.menu * {margin:0;padding:0;cursor:pointer}
        ul.menu .header {position:relative; float:left;color:#999999;padding: 3px 12px 2px 4px;white-space:nowrap}
        ul.menu .header ul {position:absolute; top:15px; left:0;background:#f0f0f0; overflow: hidden;list-style:none}
        ul.menu .header ul li {position:relative; padding: 3px 25px 3px 10px; white-space:nowrap; display: block}
        ul.menu .header ul li:hover {background-color:#dcdcdc}
    </style>
</head>
<body>
<ul class="menu" id="menu">
    <li class="header">
        CREATE
        <ul>
            <li>A really really long description of nothing valuable</li>
            <li>test1</li>
            <li>test2</li>
            <li>test3 and again very long</li>
        </ul>
    </li>
    <li class="header">
        SEARCH
        <ul>
            <li>test1</li>
            <li>test1</li>
            <li>test1</li>
            <li>test1</li>
        </ul>
    </li>
</ul>
</body>
</html>
4

1 回答 1

1

为嵌套 ul 设置的溢出属性是这里的原因。删除该overflow: hidden属性ul.menu .header ul应该可以纠正这个问题。

在此处查看小提琴：http: //jsfiddle.net/b45rA/1/embedded/result/。您可能需要使用再次运行命令（右上角）来呈现输出，因为 jsfiddle 在 IE7 上表现不佳。

于 2013-03-01T17:14:45.970 回答