纯css点击下拉列表在IE10和IE11中无效

时间:2017-05-31 03:50:24

标签: javascript css

我随机找到了这段代码: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>

1 个答案:

答案 0 :(得分: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>