响应 - 奇怪的菜单

Question

我正在起草网站的过程中，你也可以在手机上使用它。菜单我在这里可以看到一些小麻烦。

Problemes它的位置：

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

右边的图像描述，当我看着移动它的外观，并在左边的文字是当我在看电脑适当的时候它的外观

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

这里

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

Answer 1

美孚风格我不完全相信你会怎样想你的菜单看起来在移动。但是我做了一个codepen一个可能的解决方案：

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

希望这是有帮助的！