这是我的网站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切换到移动菜单?
提前致谢!