Hightlight Current Link in Navigation not working in Edge only
<p>I have set up a simple menu which highlights the current page a user is on by displaying with a crimson red background. This works fine in Chrome and Firefox.  </p>

<p>However, when I view in <strong>Edge</strong>, it only partly works. It is highlighting the current page but setting the background colour to white and not crimson red.  Can anyone see what I am doing wrong, and why <strong>Edge</strong> is choosing a white background for the active/current link instead of the crimson red?  The code is displayed below.</p>

<p>Thanks,</p>

<p>Andy ;-)</p>

<p>The Navigation Menu (HTML/PHP)</p>

<pre><code>&lt;nav&gt;
&lt;ul&gt;
&lt;li class="&lt;?php if ( $page == "index" ) { echo "current"; } ?&gt;"&gt;&lt;a href="index.php" title="Home Page of Site"&gt;Home&lt;/a&gt;&lt;/li&gt;
&lt;li class="&lt;?php if ( $page == "page2" ) { echo "current"; } ?&gt;"&gt;&lt;a href="page2.php" title="page2 of site"&gt;Page2&lt;/a&gt;&lt;/li&gt;
&lt;li class="&lt;?php if ( $page == "page3" ) { echo "current"; } ?&gt;"&gt;&lt;a href="page3.php" title="page3 of site"&gt;Page3&lt;/a&gt;&lt;/li&gt;
&lt;li class="&lt;?php if ( $page == "page4" ) { echo "current"; } ?&gt;"&gt;&lt;a href="page4.php" title="Page4 of site"&gt;Page4&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;      
&lt;/nav&gt;
</code></pre>

<p>The Navigation Menu (CSS)</p>

<pre><code>.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 for Current Link */
    color:#fff;  /* White font colour for Current Link *
} 

.mainHeader nav li a{
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;}
</code></pre>