IE11 issue with dropdown menu

[tvj]

Hi,

Minor dropdown menu issue, see menu below created using w3.css 4.09, it works in Chrome, Firefox, Edge etc but in IE11 and earlier it doesn't display quite right; the heading has a white background and in other browsers has the correct blue.  I could set the button class to blue which would fix it but then when I move off the heading to the sub menu the grey button background reverts to the blue which is not what i want.

<div class="w3-top">
  <div class="w3-bar w3-blue">
  <!--<a href="#" class="w3-bar-item w3-button">Home</a>-->
    <div class="w3-dropdown-hover w3-blue">
      <button class="w3-button">Dropdown</button>
      <div class="w3-dropdown-content w3-bar-block w3-white w3-card-4">
        <a href="#" class="w3-bar-item w3-button">Link 1</a>
        <a href="#" class="w3-bar-item w3-button">Link 2</a>
        <a href="#" class="w3-bar-item w3-button">Link 3</a>
      </div>
    </div>
  </div>
</div>
 

Any help would be gratefully received.

Many thanks

Tim.

Edited January 26, 2018 by tvj