移动设备上重叠内容的css菜单

我下载了一个响应模板并安装了它。安装很好，在桌面上运行良好。当我在移动设备上打开它时，左边的菜单与主要内容重叠。可能是什么问题？它被上传到我的主机上

认为这可能是css问题，我已经看到了所有的css文件，并找到了一个相关的区域来参考菜单。这是代码。我试着改变位置：固定为绝对、静态、相对、初始，但似乎什么都不起作用。你们能给点建议吗

/* Tooltips */
.aToolTip {border:1px solid #fff;background:url(../images/opacity_50_black.png) repeat;color:#fff;margin:0;padding:2px 10px;font-size:11px;}
.aToolTip .aToolTipContent {position:relative;margin:0;padding:0}
a.aToolTipCloseBtn {display:block;height:20px;width:20px;overflow:hidden;background:url(../images/loading/close.gif) no-repeat;text-indent:-9999px;outline:none;position:absolute;top:-15px;right:-20px}
#menu {position:fixed;z-index:2;top:130px;padding-left:4px}
#menu li {margin-top:-4px;font-size:30px;line-height:1.2em}
#menu li a {text-transform:uppercase;color:#1e1e1e;text-decoration:none;letter-spacing:-1px}
#menu li a:hover, #menu .menu_active a {color:#f77007}
#menu .nav1 a:hover, #menu .nav1.menu_active a {color:#f77007}
#menu .nav2 a:hover, #menu .nav2.menu_active a {color:#a63eb0}
#menu .nav3 a:hover, #menu .nav3.menu_active a {color:#077ef7}
#menu .nav4 a:hover, #menu .nav4.menu_active a {color:#e40016}
#menu .nav5 a:hover, #menu .nav5.menu_active a {color:#0aa868}
#menu .nav6 a:hover, #menu .nav6.menu_active a {color:#f77007}
#menu .nav7 a:hover, #menu .nav7.menu_active a {color:#a63eb0}
#menu .nav8 a:hover, #menu .nav8.menu_active a {color:#077ef7}
#menu .nav9 a:hover, #menu .nav9.menu_active a {color:#e40016}
#menu .nav10 a:hover, #menu .nav10.menu_active a {color:#0aa868}
#menu .nav11 a:hover, #menu .nav11.menu_active a {color:#f77007}
/* content */
#content {padding:130px 0 0 243px;width:649px;position:relative;z-index:1;padding-bottom:56px}

CSS是问题还是别的什么

---

请告知

是否有办法解决我的问题？如果您选中style.css，它有一个规则

.main{width:900px；}

，因此该模板不是为移动设备设计的响应性模板，您必须使用进行转换。如果该模板没有响应，则可以这样做。让我们不要做出反应。可以对css代码做些什么来保持菜单稳定在原来的位置吗？如果css代码没有问题，那么问题出在哪里>请尝试

.main{min width:900px；}

，但我认为这不会有帮助。这就是模板的编码方式，你必须尝试媒体查询。我不擅长css，所以我不能理解任何媒体查询。我检查了css文件并找到了.main{margin:0auto；width:900px}。我尝试了最小宽度，但没有改变：(