@media all and - problemer i menu

hej


det er sådan at jeg har problemer med menu inde på min siden. jeg kan lige nu og her ikke se hvad problemer er , men det ville være super hvis der er nogle som kunne hjælp mig eller ligne. det er sådan at jeg er næsten færdig med siden det er kun lige nu og her i menu der er problemer med det

HER

Du kan se min css her

 @media all and (max-width: 300px) and (min-width: 150px) {
     ul.nav {
         width: 200px;
     }
 }
 @media all and (max-width: 450px) and (min-width: 300px) {
     ul.nav {
         width: 350px;
     }
 }
 @media all and (max-width: 788px) and (min-width: 450px) {
     ul.nav {
         width: 500px;
     }
 }
 .nav, .nav ul {
     margin: 0;
     padding: 0;
     list-style: none;
     line-height: 1;
 }
 
 /* The top navigation menu */
 .nav {
     /* Layout & positioning */
     display: block;
     position: relative;
     width: 970px;
     height: 34px;
     border-bottom: 3px solid #45c3f2;
     border-top-left-radius: 3px;
     border-top-right-radius: 3px;
 
     /* Background & effects */
     background: #494949; /* Background for Internet Explorer 9 and older browsers */
     background: -webkit-linear-gradient(bottom, #444, #555); /* Background for Chrome & Safari */
     background: -moz-linear-gradient(bottom, #444, #555); /* Background for Firefox */
     background: -o-linear-gradient(bottom, #444, #555); /* Background for Opera */
     background: -ms-linear-gradient(bottom, #444, #555); /* Background for Internet Explore 10+ */
 }
 
 /* The link containers */
 .nav>li {
     display: block;
     float: left;
     position: relative;
     margin: 0;
     padding: 0;
 }
 
 /* The main navigation links */
 .nav>li>a {
     /* Layout & positioning */
     display: block;
     width: 90px;
     padding: 11px 0px;
     border-right: 1px dotted #393939;
     border-left: 1px dotted #595959;
 
     /* Typography */
     font-family: Helvetica, Arial, sans-serif;
     font-size: 12px;
     font-weight: normal;
     text-decoration: none;
     color: #fff;
     text-shadow: 0 1px 0 #2a2a2a;
     text-align: center;
 
     /* Chaning the background on hover with a smooth transition */
     -webkit-transition: background .35s linear;
     -moz-transition: background .35s linear;
     -ms-transition: background .35s linear;
     -o-transition: background .35s linear;
     transition: background .35s linear;
 }
 
 /* Chaning the background on hover */
 .nav>li>a:hover, .nav>li:hover>a {
     background: rgba(0, 0, 0, .15);
     background: #414141;
 }
 
 .nav>li:first-child a {
     border-top-left-radius: 3px;
 }
 
 /* The pointer arrow */
 .arrow {
     cursor: pointer;
     height: 0px;
     border: 3px solid transparent;
     border-bottom-color: #45c3f2;
     left: 43px;
     position: absolute;
     bottom: 0px;
     width: 0;
     z-index: 0;
 
     -moz-transition: all .3s ease;
     -ms-transition: all .3s ease;
     -o-transition: all .3s ease;
     -webkit-transition: all .3s ease;
     transition: all .3s ease;
 }
 
 .arrow:hover {
     -moz-transition-duration: 3000s;
     -ms-transition-duration: 3000s;
     -o-transition-duration: 3000s;
     -webkit-transition-duration: 3000s;
     transition-duration: 3000s;
 }
 
 .nav li:nth-child(1):hover ~ .arrow, .nav .active:nth-child(1) ~ .arrow {
     left: 43px;
 }
 .nav li:nth-child(2):hover ~ .arrow, .nav .active:nth-child(2) ~ .arrow {
     left: 134px;
 }
 .nav li:nth-child(3):hover ~ .arrow, .nav .active:nth-child(3) ~ .arrow {
     left: 226px;
 }
 .nav li:nth-child(4):hover ~ .arrow, .nav .active:nth-child(4) ~ .arrow {
     left: 318px;
 }
 .nav li:nth-child(5):hover ~ .arrow, .nav .active:nth-child(5) ~ .arrow {
     left: 410px;
 }
 .nav li:nth-child(6):hover ~ .arrow, .nav .active:nth-child(6) ~ .arrow {
     left: 502px;
 }
 .nav li:nth-child(7):hover ~ .arrow, .nav .active:nth-child(7) ~ .arrow {
     left: 594px;
 }
 .nav li:nth-child(8):hover ~ .arrow, .nav .active:nth-child(8) ~ .arrow {
     left: 686px;
 }

min menu her

 <ul class="nav">
             <li class="active"><a href="/forside/">Forside</a></li>
             <li><a href="/apps/">Apps</a></li>
             <li><a href="/infomation/">Om os</a></li>
             <li><a href="/appsdanmark/">Appsdanmark</a></li>
             <li><a href="/kontakt/">Kontakt</a></li>
             <div class="arrow"></div>
         </ul>

Håber du kan hjælp mig videre til at jeg kan få løse mit probleme med menu