0

ドロップダウン メニューがあり、Internet Explorer 7 を除いて完全に機能します。MS さん、ありがとうございます。

デモンストレーションのために、この単純な HTML を作成しました。ドロップダウン メニューが開いているので、問題を簡単に説明できます。IE 7 では、ドロップダウン メニューはトップ レベル メニューの幅にカットされます。IE8 および IE9 では、これは問題になりません。

次の JavaScript を追加することで問題を解決できます。

要素.スタイル.幅 =​​ 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