html - Hightlight Current Link in Navigation not working in Edge only -

i have set simple menu highlights current page user on displaying crimson red background. works fine in chrome , firefox.

however, when view in edge, partly works. highlighting current page setting background colour white , not crimson red. can see doing wrong, , why edge choosing white background active/current link instead of crimson red? code displayed below.

thanks,

andy ;-)

the navigation menu (html/php)

<nav> <ul> <li class="<?php if ( $page == "index" ) { echo "current"; } ?>"><a href="index.php" title="home page of site">home</a></li> <li class="<?php if ( $page == "page2" ) { echo "current"; } ?>"><a href="page2.php" title="page2 of site">page2</a></li> <li class="<?php if ( $page == "page3" ) { echo "current"; } ?>"><a href="page3.php" title="page3 of site">page3</a></li> <li class="<?php if ( $page == "page4" ) { echo "current"; } ?>"><a href="page4.php" title="page4 of site">page4</a></li> </ul>       </nav> 

the navigation menu (css)

.mainheader nav{     background-color: #444;     font-size: 1.143em;     height: 40px;     line-height: 30px;     margin: 0 auto 30px auto;     text-align: center;     border-radius: 5px;}  .mainheader nav ul{     list-style: none;     margin: 0 auto;}  .mainheader nav ul li{     float: left;     display: inline;}  .mainheader nav a:link, .mainheader nav a:visited{     color: #fff;     display: inline-block;     padding: 5px 23px;     height: 30px;     text-decoration: none;}  .mainheader nav a:hover, .mainheader nav a:active, .mainheader nav  ul li.current a:link, .mainheader nav ul li.current a:visited{     background-color:#dc143c;  /* crimson red background current link */     color:#fff;  /* white font colour current link * }   .mainheader nav li a{     border-radius: 5px;     -moz-border-radius: 5px;     -webkit-border-radius: 5px;}