純CSS單擊下拉列表在IE10和IE11中不起作用

Question

我隨機發現此代碼： http : //jsfiddle.net/alsweeet/ycYg7/

我使用了它，直到發現它不適用於IE11。 我正在尋找適用於IE10，IE11或純CSS下拉列表（或本機javascript）的代碼修復。 我希望它少於50行。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>

<body>
  <style>
    ul{
            display: none;
            position: relative;
            top: -55px;
            padding: 55px 0 0 0;
            margin: 0;
        }
        ul:hover{
            display: block; 
        }
        li{
            background: #ddd;
            padding: 10px;
            list-style: none;.
        }
        li:hover{ 
            background: #eee;
            cursor: pointer;
        }
        #button{
            display: inline-block;
            padding: 10px;
            background: #ccc;
            color: white;
        }
        #dd{
            display: inline-block;
        }
        #dd:active ul{
            display: block;
        } 
        #dd:aactive ul:hover{
            display: block;
        }
        #dd:active #button{
            display: inline-block;
            padding: 10px;
            background: #ccc;
            color: white;
        }
  </style>
  <div id="dd">
    <a href="#" id="button">Select Language</a>
    <ul>
        <li>English</li>
        <li>French</li>
        <li>German</li>
        <li>Spanish</li>
      </ul>
  </div>
</body>
</html>

Answer 1

您只需要通過具有焦點的錨定進行定位即可顯示這樣的內容

#dd a:focus + ul{
    display: block;
}

例

 ul{ display: none; position: relative; top: -55px; padding: 55px 0 0 0; margin: 0; } ul:hover{ display: block; } li{ background: #ddd; padding: 10px; list-style: none;. } li:hover{ background: #eee; cursor: pointer; } #button{ display: inline-block; padding: 10px; background: #ccc; color: white; } #dd{ display: inline-block; } #dd a:focus + ul{ display: block; }

 <div id="dd"> <a href="#" id="button">Select Language</a> <ul> <li>English</li> <li>French</li> <li>German</li> <li>Spanish</li> </ul> </div>

純CSS單擊下拉列表在IE10和IE11中不起作用

問題描述

1 個解決方案

解決方案1
1 已采納 2017-05-31 04:19:07

純CSS單擊下拉列表在IE10和IE11中不起作用

問題描述

1 個解決方案

解決方案1 1 已采納 2017-05-31 04:19:07

解決方案1
1 已采納 2017-05-31 04:19:07