使两列下拉菜单移动响应

Question

这是我的网站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切换到移动菜单？

提前致谢！