responsive - strange menu

Question

I am in the process of drafting website that you can also use it on mobile. Menu I have a little trouble as you can see here.

Problemes its here:

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

The image on the right describe how it looks when I look at mobile, and the text on the left is how it looks when I look at the computer right moment

CSS

    .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;
}

Answer 1

I am not entirely sure how you would like your menu to look on mobile. But I've made a codepen with a possible solution:

http://codepen.io/monsteronfire/pen/ubrvD

Hope it is helpful!