Css focus on button is working in Edge and in Chrome, but in Firefox and IE is not -

i'm loking on stack , on internet find solution fix problem

button:focus 

i had creade dropdown focus menu, example (http://koen.kivits.com/articles/pure-css-menu/)

my css code:

.dropdown-button:focus > .dropdown-list {     display: block;     visibility: visible; }  .dropdown-button {         padding-left: 0;         text-decoration: none;         display: list-item;         box-sizing: border-box;         position: relative;         list-style-type: none;         height: 100%;     }  .dropdown-list {     padding-left: 0px;     position: absolute;     background-color: @action-dropdown;     min-width: 180px;     z-index: 1;     text-align: left;     border: 1px solid @action-border;     display: none;     transition: display 0.2s; } 

and html:

<button class="button button-border btn-large" ng-disabled="!hashmap['object:1'].active" ng-click="hashmap['object:1'].actionevent()"><span class="hint">press on me expand buttons</span> <ul class="dropdown">     <li class="dropdown-button" tabindex="0"><span ng-bind-html="hashmap['object:1'].icon" class="icon ng-binding"><i class="fa fa-ship"></i></span><span class="block"><span ng-bind="hashmap['object:1'].name" class="text ng-binding">vessel visit</span><i class="fa fa-caret-down"></i></span>         <ul class="dropdown-list">             <li class="dropdown-button">                 <button class="button button-border inline-style" ng-disabled="!hashmap['object:2'].active" ng-click="hashmap['object:2'].actionevent()" disabled="disabled"><span ng-bind-html="hashmap['object:2'].icon" class="inline-icon ng-binding"><i class="fa fa-reply"></i></span><span ng-bind="hashmap['object:2'].name" class="inline-text ng-binding">btn1</span></button>             </li>             <li class="dropdown-button">                 <button class="button button-border inline-style" ng-disabled="!hashmap['object:3'].active" ng-click="hashmap['object:3'].actionevent()" disabled="disabled"><span ng-bind-html="hashmap['object:3'].icon" class="inline-icon ng-binding"><i class="fa fa-reply"></i></span><span ng-bind="hashmap['object:3'].name" class="inline-text ng-binding">btn2</span></button>             </li>             <li class="dropdown-button">                 <button class="button button-border inline-style" ng-disabled="!hashmap['object:4'].active" ng-click="hashmap['object:4'].actionevent()" disabled="disabled"><span ng-bind-html="hashmap['object:4'].icon" class="inline-icon ng-binding"><i class="fa fa-arrows"></i></span><span ng-bind="hashmap['object:4'].name" class="inline-text ng-binding">replan</span><span class="hint">btn3</span></button>             </li>         </ul>     </li> </ul> 

in google chrome (version 56) , microsoft edge (version 38) working.

but on otherside in mozilla firefox (version 52) , internet explorer (version 11)