1

あなたが私を助けることができるかどうか疑問に思います。HTMLとCSSのみを使用してドロップダウンメニューを作成しようとしています。ただし、以前のようにホバー機能が IE10 で機能しません。firefox や chrome などの他のブラウザでは動作しますが、IE10 では動作しません。

私のHTMLコード

<html>
<head>
<!--[if IE]> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
<![endif]-->

<link rel = "stylesheet" type = "text/css" href = "style.css" />
</head>

<body>
<div class = "centeredmenu">
    <ul>
        <li><a href = "#">Home</a></li>

        <li><a href = "#">Client</a>
            <ul>
                <li><a href = "#">Create Client</a></li>
                <li><a href = "#">View Clients</a></li>
            </ul>
        </li>

        <li><a href = "#">Invoices</a>
            <ul>
                <li><a href = "#">Search</a></li>
                <li><a href = "#">View All</a></li>
            </ul>
        </li>

        <li><a href = "#">Suppliers</a>
            <ul>
                <li><a href = "#">Add Supplier</a></li>
                <li><a href = "#">View All</a></li>
            </ul>
        </li>
    </ul>
</div>
</body>
</html>

私のCSSコード

.centeredmenu ul li ul { display:none; }

.centeredmenu ul li:hover > ul { display:block; }

.centeredmenu ul li ul li ul { display:none; }

.centeredmenu ul li ul li:hover > ul { display:block; }

.centeredmenu ul {
    background:#9bbe3c;
    width:99.8%;
    margin-top:0.5%;
    z-index:1;
    list-style:none;
    position:relative;
    display:inline-table;
    font-family:'Calibri' !important;
    font-size:1em;
    border:1px solid #596f1b;
}

.centeredmenu ul:after { content: ""; clear:both; display:block; }

.centeredmenu ul li { float:left; }

.centeredmenu ul li a {
    display:block;
    color:#fff;
    text-decoration:none;
    padding:14px 22px 14px 23px !important;
}

.centeredmenu ul li a:hover{ background:#586f1b; }

.centeredmenu ul li ul { background:#9bbe3c; position:absolute; top:94.5%; width:200px; }

.centeredmenu ul li ul li { float:none; position:relative; }

.centeredmenu ul li ul li ul { background:#9bbe3c; position:absolute; left:101%; top:-1%; }
4

5 に答える 5

2

今日、私は同様の問題に遭遇しました。ドロップダウン メニューは Firefox では正常に機能していましたが、IE ではまったく機能しませんでした。

1-ファイルをhtmlからaspに変更しました。

これにより、孤立したコードの断片があることがわかりました。

-> My code

-> </div>
<td class="whatever">

-> <div>

私はそれを削除しましたが、すべてが正常に機能していました。

于 2014-04-15T03:39:10.667 に答える
1

「頭」に次のコードを追加しただけで、それが機能します。

meta http-equiv="X-UA-Compatible" content="IE=edge" in matatag
于 2015-10-30T06:04:23.253 に答える
0

HTML と CSS を JSFiddle に配置すると、期待どおりに動作します。

マシンにアクセスしているときに何か問題がある可能性があります。

<div class = "centeredmenu">
    <ul>
        <li><a href = "#">Home</a></li>

        <li><a href = "#">Client</a>
            <ul>
                <li><a href = "#">Create Client</a></li>
                <li><a href = "#">View Clients</a></li>
            </ul>
        </li>

        <li><a href = "#">Invoices</a>
            <ul>
                <li><a href = "#">Search</a></li>
                <li><a href = "#">View All</a></li>
            </ul>
        </li>

        <li><a href = "#">Suppliers</a>
            <ul>
                <li><a href = "#">Add Supplier</a></li>
                <li><a href = "#">View All</a></li>
            </ul>
        </li>
    </ul>
</div>

ライブデモを参照

于 2013-06-20T15:21:46.250 に答える
0

問題は、IE10 が「quirks」モードでレンダリングされることです。したがって、「標準」モードに変更すると、正常に動作するはずです。

PHPを使用している場合、IE 10に標準モードを強制的に使用させるには、Webサイトのヘッドに次を追加します...回答のクレジットは次のとおりです。

IE10 は IE7 モードでレンダリングします。標準モードを強制する方法は?

于 2013-10-24T11:50:58.080 に答える
0

まったく同じ問題に遭遇しました。行方不明だったことが判明しました。

HTML ページの上部に次のように入力すると、問題が解決しました。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
于 2013-07-15T01:57:22.470 に答える