JQuery Links

JQuery Links

Hello everybody,

I have a problem with rendering links.

No matter what I do in the CSS, the links are never presented as intended.

in CSS the links for the menu look like this:
  2. header
  3. {
  4. position: fixed;
  5. top: 0;
  6. left: 0;
  7. padding: 0 100px;
  8. background:#262626;
  9. width: 100%;
  10. box-sizing: border-box;
  11. text-shadow:0 0 0;
  12. }
  13. header .logo
  14. {
  15. color: #fff;
  16. height: 50px;
  17. line-height: 50px;
  18. font-size: 24px;
  19. float: left;
  20. font-weight: bold;
  21. }
  22. header nav
  23. {
  24. float: right;
  25. }
  26. header nav ul
  27. {
  28. margin: 0;
  29. padding: 0;
  30. display: flex;
  31. }
  32. header nav ul li
  33. {
  34. list-style: none;
  35. }
  36. header nav ul li a,
  37. header nav ul li a:link,
  38. header nav ul li a:visited
  39. {
  40. height: 50px;
  41. line-height: 50px;
  42. padding: 0 20px;
  43. color: #fff;
  44. text-decoration: none;
  45. display: block;
  46. }
  47. header nav ul li a:hover,
  48. header nav ul li a.active
  49. {
  50. color: #fff;
  51. background: #2196f3;
  52. }
Html Code:
  1. <html>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <head>
    <title>JVerein Web</title>
          <link rel="stylesheet" type="text/css" href="css/style.css">
                 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">


    <link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
    <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $('.menu-toggle').click(function(){
    $('nav').toggleClass('active')
    })
    })
    </script>
    </head>
    <body>
    <div class="mitglieder"><header>
    <div class="logo">JVereinWeb - DLRG</div>
    <nav >
    <ul><li><a href="?tab=home" data-ajax="false"><i class="fas fa-home"></i>&nbsp;Home</a></li><li><a href="?tab=mitglieder" class="active" data-ajax="false"><i class="fa fa-users"></i>&nbsp;Mitglieder</a></li><li><a href="?tab=spenden" data-ajax="false"><i class="fas fa-piggy-bank"></i>&nbsp;Spenden</a></li><li><a href="?tab=zeiterfassung" data-ajax="false"><i class="fas fa-stopwatch"></i>&nbsp;Zeiterfassung</a></li><li><a href="?tab=wachplan" data-ajax="false"><i class="fas fa-calendar-alt"></i>&nbsp;Wachplan</a></li><li><a href="index.php?out=1" data-ajax="false"><i class="fas fa-sign-out-alt"></i>&nbsp;Logout</a></li></ul>
    </nav>
    <div class="menu-toggle"><i class="fa fa-bars" aria-hidden="true"></i></div>
    </header>

on the homepage however these attitudes pull only conditionally.

(Home, Mitglieder, Spenden and Logout are visited ,Zeiterfassung and Wachplan not)
I expect that the font color is always white. No matter if I visited the links or not.
What am I doing wrong?