Pure css click dropdown not working in IE10 and IE11

Question

I found this code randomly : http://jsfiddle.net/alsweeet/ycYg7/

I used it through out, only to find out it doesnt work for IE11. I am looking for a fix for this code that works with both IE10, IE11 or alternatively a pure css dropdown (or native javascript). I prefer it to be less than 50 lines.

<!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>

Even in Chrome that drop-down doesn't seem to work from the keyboard. Also, is `#dd:aactive` a typo? (That particular rule does seem redundant, but still...) — nnnnnn, May 31 '17 at 03:57
why not use something like fancyselect https://github.com/paulstraw/FancySelect — Kiran Dash, May 31 '17 at 04:00
@KiranDash I am trying to keep dependencies to a minimum. That lib is also not maintained anymore. I closed the ul and div, it wasnt that way in the jsbin. Also yes, the original author had some typos but they seem to not matter — ParoX, May 31 '17 at 04:07
Did you look at [potential fixes](https://stackoverflow.com/questions/20541306/how-to-write-a-css-hack-for-ie-11) online? What have you tried so far? Javascript could resolve your problem easily, but there may be difficulties with a pure css, cross-browser, solution. — wahwahwah, May 31 '17 at 04:14

Ismail Farooq · Accepted Answer · 2017-05-31T04:27:40.920

You just need to show like this by targeting via anchor with focus

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

Example

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>

Pure css click dropdown not working in IE10 and IE11

1 Answers1