0

純粋な css を使用して垂直ポップアウト メニューを作成しようとしています。このように：

http://devinrolsen.com/wp-content/uploads/2009/09/fig4.gif

FF、Opera、Chrome ではすべてが完璧に機能しますが、メニュー項目に移動したときにサブレベルが表示されない Internet Explorer 9 では機能しません。トリックはどこにありますか？

完全なコードは次のとおりです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>

<style type="text/css">
#navigation{font-size: 20px; width: 150px}
#navigation ul{margin: 0px;padding: 0px;}
#navigation li{list-style: none;}
ul.top-level{background: #686868}
ul.top-level.li{
border-style: solid;
border-width: 2px;}
#navigation a{
color: #ffffff;
display: block;
height: 25px;
line-height: 25px;
text-indent: 10px;
text-decoration: none;
width: 100%
}
#navigation a:hover {text-decoration: underline; background-color: #000000; position: relative;}
#navigation li:hover {position: relative;}

ul.sub-level {display: none}
li:hover .sub-level{
background: #000000;
display: block;
width: 150px;
position: absolute;
left: 75px;
top: 5px;
}

</style>

</head>
<body>

    <div id="navigation">
        <ul class="top-level">
            <li><a href="#">Home</a>
                <ul class="sub-level">
                    <li><a href="#">Sub Menu Item 1</a></li>
                    <li><a href="#">Sub Menu Item 2</a></li>
                    <li><a href="#">Sub Menu Item 3</a></li>
                    <li><a href="#">Sub Menu Item 4</a></li>
                    <li><a href="#">Sub Menu Item 5</a></li>
                </ul>
            </li>
        </ul>       
    </div>

</body>
</html>
4

1 に答える 1

0

ああなるほど。この問題は、IE9 で必要な DocType を指定することで解決できます。以下を置き換えます。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

と：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

サブメニューが「魔法のように」表示されるはずです。

于 2012-08-11T19:19:02.310 に答える