Problemer med aktivt menupunkt, HJÆLP

HTML kode 

 <nav>
 
     <ul>
     
     <?php if ($this_page == "index.php"){$active_class = "active";} else{$active_class = "";}?>
     <li class="menu"><a href="index.php" class="<?php echo $active_class ?>">Forside</a></li>
         
     <?php if ($this_page == "om.php"){$active_class = "active";} else{$active_class = "";}?>
     <li class="menu"><a href="om.php" class="<?php echo $active_class ?>">Om os</a></li>
         
     <?php if ($this_page == "malselv.php"){$active_class = "active";} else{$active_class = "";}?>
     <li class="menu"><a href="malselv.php" class="<?php echo $active_class ?>">Mal selv</a></li>
         
     <?php if ($this_page == "galleri.php"){$active_class = "active";} else{$active_class = "";}?>
     <li class="menu"><a href="galleri.php" class="<?php echo $active_class ?>">Galleri</a></li>
         
     <?php if ($this_page == "kontakt.php"){$active_class = "active";} else{$active_class = "";}?>
     <li class="menu"><a href="kontakt.php" class="<?php echo $active_class ?>">Kontakt</a></li>
     
     
     </ul>
 
 </nav>

CSS kode 

 .menu{
     float: left;
     text-align: center;
     overflow:visible;
     padding: 1%;
     display: inline;
     margin: 0 1% 0 0;
     background-color:#3376bc;
     width:16.7%;
     border-top-left-radius: 0.6em;
     border-top-right-radius: 0.6em;
     font-family: font-family: 'Noto Serif', serif;
     font-size: 1.1em;    
 }
 
 /*nav ul{
     background-color: #CCC;
     width: 100%;
 }*/
 
 .menu a{
     text-decoration: none;
     color: white;
 }
 
 .menu a:visited{
     text-decoration: none;
 }
 
 .menu:hover{
 }
 
 .menu a:hover{
     text-decoration: underline;
 }
 
 .menu a.active{
     -webkit-appearance:none;
     background-color:#fff;
     color:#03C;
         }