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 个答案: