关于CSS+js的三级横向菜单

Question

在firefox下，第三级菜单没办法横向显示，各位大虾有空帮忙看下，不胜感激<style>
.menu_style_3_1{width:100%;height:75px; background-color:#F60;background-repeat:repeat-x; }
.menu_style_3_1 ul {margin:0px;padding: 0px;list-style: none;background-color:black;}
.menu_style_3_1 ul li {float: left; font-weight:bold;display:inline; margin-right:10px; cursor: pointer;}
.menu_style_3_1 ul li ul {margin: 0px;padding: 0px;display:none;border-left: 0px;position:absolute; background-color:#F60;}
.menu_style_3_1 ul li ul li ul {}
.menu_style_3_1 ul li a {display: block;font-size: 12px;line-height: 25px;text-decoration: none; color:#FFF;padding-left: 8px;border-left: 0px;}
.menu_style_3_1 ul li ul li a {border-bottom: 0px;}
.menu_style_3_1 ul a:hover {color: #F60;background-color: #EFEFEF;}
.menu_style_3_1 ul li.over ul, li.over ul {display: block;}
.menu_style_3_1 ul li.over li ul {display: none; margin-left:5px;}
.menu_style_3_1 ul li li.over ul {display: block;}
</style>
<div id="control_9_22" class='style_control_1' style="left:200px;top:200px;height:400px;overflow:hidden;width:1000px;position:absolute;z-index:1;">
    <div id="content_22" class="content" style="position:absolute;left:20px; top:40px; height:340px;width:450px;z-index:1;">
        <div class="menu_style_3_1" style="  float:1; text-align:1">
            <ul id="menu_22">
                <li>
                    <a href="http://www.sina.com" target='_blank'>
                        menu1
                    </a>
                    <span class="jian" id="menu_22_0">
                    </span>
                </li>
                <li>
                    <a href="http://www.sina.com" target='_blank'>
                        menu2
                    </a>
                    <span class="jia" id="menu_22_1">
                    </span>
                    <ul id="ChildMenu_22_1" class="collapsed">
                        
<li>
                            <a href="http://www.sina.com" target='_blank'>
                                c_menu1
                            </a>
                        </li>
                        <li>
                            <a href="http://www.sina.com" target='_blank'>
                                c_menu2
                            </a>
                            <span class="jia" id="menu_22_1_1">
                            </span>
                            <ul id="ChildMenu_22_1_1" class="collapsed">
                                <li>
                                    <a href="http://www.sina.com" target='_blank'>
                                        c_c_menu1
                                    </a>
                                </li>
                                <li>
                                    <a href="http://www.sina.com" target='_blank'>
                                        c_c_menu2
                                    </a>
                                </li>
<li>
                                    <a href="http://www.sina.com" target='_blank'>
                                        c_c_menu3
                                    </a>
                                </li>
                            </ul>
                        </li>
<li>
                            <a href="http://www.sina.com" target='_blank'>
                                c_menu3
                            </a>
                        </li>
                    </ul>
                </li>
                <li>
                    <a href="http://www.sina.com" target='_blank'>
                        menu3
                    </a>
                    <span class="jian" id="menu_22_2">
                    </span>
                </li>
            </ul>
        </div>
    </div>
</div>
<script>
    (function() {
        var Menu = function(c_id) {
            var menuRoot = document.getElementById("menu_" + c_id).getElementsByTagName("li");
            for (var i = 0; i < menuRoot.length; i++) {
                menuRoot[i].onmouseover = function() {
                    this.className = (this.className.length > 0 ? " ": "") + "over";
                }
                menuRoot[i].onmouseout = function() {
                    this.className = this.className.replace("over", "");
                }
            }
        }
        var menu_22 = new Menu("22");
    })();
</script>

Answer 1

暂且解决：第三级： <ul id="ChildMenu_22_1_1" class="collapsed"  style="width:300px;">
                                    <li><a href="http://www.sina.com" target='_blank'>c_c_menu1 </a></li>
                                    <li><a href="http://www.sina.com" target='_blank'>c_c_menu2 </a></li>
                                    <li><a href="http://www.sina.com" target='_blank'>c_c_menu3 </a></li>
                                </ul>