Question

我正在起草网站，您也可以在移动设备上使用它。菜单我有点麻烦，你可以在这里看到。

问题在这里：

右边的图像描述了我看手机时的外观，左边的文字是我看电脑的时候的样子

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

我不完全确定您希望在移动设备上查看菜单。但我已经制作了一个可能的解决方案：

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

希望它有用！

响应 - 奇怪的菜单

1 个答案: