responsive menu virker ikke helt

Hej

jeg er i gang med at bygge min nye hjemmeside op til mobil også, derfor vil jeg høre jer ad hvordan det kan være at jeg har det her problem som bliver vist på linket.

http://billedeupload.dk/?v=auFEW.png

Til ventre kan du se når jeg bruger computer og til højre sådan ser det ud når jeg er på f.eks mobil.

Computer style hvis jeg kan kalde det.

 .menu{
     height:42px;
     background:#333; 
     border-bottom:solid 3px red;
     }
 .menu ul{
     margin:0; 
     padding:0; 
     float:left; 
     list-style:none;
     }
 .menu ul li{
     position:relative;
     float:left; 
     }
 .menu ul li a{
     display:block;
     height:42px; 
     padding:0 15px; 
     font:15px/45px 'Anaheim', sans-serif; 
     color:#fff; 
     text-transform:uppercase; 
     text-decoration:none;
     -webkit-transition:background 190ms ease-in, color 190ms ease-in;
     -moz-transition:background 190ms ease-in, color 190ms ease-in;
     -ms-transition:background 190ms ease-in, color 190ms ease-in;
     -o-transition:background 190ms ease-in, color 190ms ease-in;
     transition:background 190ms ease-in, color 190ms ease-in;
     }
 .menu ul:hover li.active > a{
     background:#333; 
     color:#fff; 
     }   
 .menu ul li.active > a, .menu ul li:hover > a, .menu ul li.active:hover > a{
     background:red; 
     color:#FFF; 
     }   
 .menu ul li a:active, .menu ul li.active a:active{
     color:#CCC;
     }

Mobil style here.

 .menu {
     width: 95%;
 }
 .menu li {
     clear: both;
     padding: 5px 15px;
 }
 .menu li a{
     text-decoration: none;
     color: #ffffff;
 }

Sådan ser hele kode ud med mobil style

 @media screen and (max-width: 524px) {
     body {
         background: #000;
     }
     .menu {
            width: 95%;
     }
     .menu li {
         clear: both;
         padding: 5px 15px;
     }
     .menu li a{
         text-decoration: none;
         color: #ffffff;
     }
 }
 @media screen and (max-width: 758px) {
     body {
         background: #000;
     }
     .menu {
            width: 95%;
     }
     .menu li {
         clear: both;
         padding: 5px 15px;
     }
     .menu li a{
         text-decoration: none;
         color: #ffffff;
     }
 }
 @media screen and (max-width: 960px) {
     body {
         background: #000;
     }
     .menu {
            width: 95%;
     }
     .menu li {
         clear: both;
         padding: 5px 15px;
     }
     .menu li a{
         text-decoration: none;
         color: #ffffff;
     }
 }

Håber du kan hjælpe mig videre til at hjemmesiden snart kan komme online.