使两列下拉菜单移动响应

时间:2016-06-24 11:36:52

标签: jquery html ios css mobile

这是我的网站http://brightlegal.co.uk/。在“服务”菜单项下,有两个子菜单,“个人服务”和“企业服务”。我试图让它们具有移动响应性(或者至少在移动设备上看起来更好),这是我到目前为止的css:

#main-nav ul li {
  float: left;
}
#main-nav ul {
  width: 400px;
}

@media screen and (max-width: 725px) {
#headerwrap #main-nav {
    width: 920%;
}
#headerwrap #main-nav li {
    width: 150px;
    float: left;
    clear: none;
    text-align: left;

#main-nav ul {
    width: 150px;

}}

这种作品,我用http://www.studiopress.com/responsive/来看看它在不同尺寸下的表现。它似乎在480px下工作效果最好,但屏幕两侧的重叠程度要小于此值。在768px(纵向iPad),它切换回桌面菜单,但这与徽标重叠。如何修复此问题,或将纵向iPad切换到移动菜单?

提前致谢!

0 个答案:

没有答案