三级菜单更新，修改一些错误

css:

<style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
            border: 0;
        }
        body
        {
            font-family: arial, 宋体, serif;
            font-size: 12px;
        }
        .navRoot
        {
            list-style-type: none;
            background: #666;
            height: 30px;
        }
        .navRoot li
        {
            position: relative;
            height: 30px;
            line-height: 30px;
        }
        .navRoot li a:link, .navRoot li a:visited
        {
            display: block;
            text-decoration: none;
        }
        .navRoot li ul
        {
            position: absolute;
            list-style-type: none;
            margin: 0px;
            padding: 0px;
        }
        .navRoot li ul li
        {
            vertical-align: bottom;
            display: block;
            position: relative;
            white-space: nowrap;
        }
        .navRoot li ul li ul
        {
            list-style-type: none;
            position: absolute;
            top: 0px;
        }
        .navRoot li ul li ul li
        {
            margin: 0px;
            padding: 0px;
            white-space: nowrap;
        }
    </style>

JavaScript:

<script type="text/javascript">

        (function ($) {
            //菜单事件控制器，控制菜单的显隐
            $.menuControl = function () {
                this.displaySubMenu = function (li, event) {
                    var ifr;
                    //divContainer为li中包含的div,此div用作包含ul,并在ul后放置iframe用于遮挡ActiveX等高显示优先级元素
                    var divContainer = $(li).children("div:first");
                    //判断iframe是否已创建
                    ifr = divContainer.children("iframe:first");
                    if (ifr.length == 0) {
                        ifr = $(document.createElement("iframe"));
                    }

                    //设置div为浮动
                    divContainer.css({ "position": "absolute", "left": "0px", "top": "0px", "display": "block","height":"100px"});

                    //iframe设置样式，宽高与同级ul元素相同，设置隐藏
                    ifr.css({ "left": "0px", "top": "0px", "display": "block" });
                    ifr.attr({"frameborder" : "0","scrolling" : "no"});
                    
                    var subMenu = $(li).children("div ul:first");
                    var subMenu_o = li.getElementsByTagName("ul")[0];
                    $("#txtMess").text($("#txtMess").text() + "\r\n" + subMenu_o.offsetWidth + "," + subMenu.height());
                    ifr.css({ "width": subMenu_o.offsetWidth, "height": subMenu_o.offsetHeight });
                    
                    //ifr.css({ "width": subMenu.width(), "height": subMenu.height() });
                    ifr.css({ "progid": "DXImageTransform.Microsoft.Alpha(style=0,opacity=0)" });

                    //根据DOM结构判断是否为第三级菜单，是则设置其left放在父菜单的右边，否则设置top放到父菜单的下方
                    if ($(li).parents().get(2) != null && $(li).parents().get(2).tagName == "LI") {
                        divContainer.css("left", li.offsetWidth);
                    }
                    else {
                        divContainer.css("top", li.offsetHeight);
                    }

                    //在div后追加iframe
                    divContainer.append(ifr);
                };
                this.hideSubMenu = function (li, event) {
                    var e = $.event.fix(event);
                    //var target_element = e.relatedTarget;
                    var target_element = e.toElement || e.relatedTarget;
                    //当执行鼠标移出时，判断是否移出到当前li的子元素(子菜单上)，是则不执行隐藏操作
                    var flagContains = false;
                    if (jQuery.browser.msie) {
                        flagContains = li.contains(target_element);
                    }
                    else {
                        try {
                            var res = li.compareDocumentPosition(target_element);
                            if (res == 20 || res == 0) {
                                flagContains = true;
                            }
                        } catch (e) { };
                    }
                    if (!flagContains) {
                        var subMenu = $(li).children("ul:first");
                        var divContainer = $(li).children("div:first");
                        if (divContainer.children("iframe:first")) {
                            divContainer.remove(divContainer.children("iframe:first"));
                        }
                        $("#txtMess").text($("#txtMess").text() + "\r\n" + "hidden:" + target_element.tagName);
                        divContainer.css("display", "none");
                    }
                };
            };
        })(jQuery);
        var menuNav = new $.menuControl();

        (function ($) {
            //菜单实体对象
            $.menuModel = function(text,navigateURL,id,parentID){
                this.text = text;
                this.navigateURL = navigateURL;
                this.id = id;
                this.parentID = parentID;
            }
        })(jQuery);

        (function ($) {
            //菜单集合对象
            $.menuModelColl = function () {
                this.css;
                this.items = $(new Array());
                this.urRoot;
                //添加菜单项
                this.add = function (menuItem) {
                    if ($.inArray(menuItem, this.items) == -1) {
                        this.items.push(menuItem);
                    }
                };
                //开始构建菜单DOM结构
                this.build = function (css) {
                    this.ulRoot = $(document.createElement("ul"));
                    this.css = css;
                    this.ulRoot.addClass(this.css);
                    for (var i = 0; i < this.items.length; i++) {
                        if (this.items[i].parentID == "0") {
                            this.addLI(this.ulRoot, this.items[i]);
                        }
                    }
                    $("#menu").append(this.ulRoot);
                };
                //添加菜单，parentNode为当前菜单的容器，menuModel为将要添加的子菜单
                this.addLI = function (parentNode, menuModel) {
                    //创建菜单及其超链接
                    var li = $(document.createElement("li"));
                    var link = $(document.createElement("a"));
                    link.attr("href", menuModel.navigateURL);
                    link.text(menuModel.text);
                    li.append(link);
                    
                    //如果为一级菜单，则设置float为left使菜单横向排列
                    if (menuModel.parentID == "0") {
                        li.css("float", "left");
                    }

                    //获得当前添加菜单的子菜单
                    var subMenuModels = $(new Array());
                    jQuery.each(this.items, function () {
                        if (this.parentID == menuModel.id) {
                            subMenuModels.push(this);
                        }
                    });
                    
                    //如果存在子菜单，则添加事件，并添加下级菜单容器div+ul，递归调用添加子菜单，将ul做为子菜单容器
                    if (subMenuModels.length > 0) {
                        //添加显隐事件
                        li.mouseover(function (event) { menuNav.displaySubMenu(this, event); });
                        li.mouseout(function (event) { menuNav.hideSubMenu(this, event); });

                        //创建div+ul子菜单容器
                        var div = $(document.createElement("div"));
                        div.css({ "display": "none", "overflow" : "visible" });
                        li.append(div);
                        var ul = $(document.createElement("ul"));
                        div.append(ul);

                        //遍历子菜单,循环递归添加子菜单
                        for (var i = 0; i < subMenuModels.length; i++) {
                            this.addLI(ul, subMenuModels[i]);
                        }
                    }

                    parentNode.append(li);
                }
            }
        })(jQuery);
        var menuItems = new $.menuModelColl();
    </script>

 

调用js和div容器：

<div id="menu"></div>
    <script language="javascript" type="text/javascript">
        menuItems.add(new $.menuModel("产品一", "#", "1", "0"));
        menuItems.add(new $.menuModel("产品一介绍", "#", "2", "1"));
        menuItems.add(new $.menuModel("产品一特点", "#", "3", "1"));
        menuItems.add(new $.menuModel("产品一主要特点", "#", "7", "3"));
        menuItems.add(new $.menuModel("产品一次要特点", "#", "8", "3"));
        menuItems.add(new $.menuModel("产品一价格", "#", "4", "2"));
        menuItems.add(new $.menuModel("产品一VIP价格", "#", "5", "4"));
        menuItems.add(new $.menuModel("产品一团购价格", "#", "6", "4"));
        menuItems.add(new $.menuModel("产品二", "#", "10", "0"));
        menuItems.add(new $.menuModel("产品二介绍", "#", "11", "10"));
        menuItems.add(new $.menuModel("产品二使用手册使用手册使用手册", "#", "12", "10"));
        menuItems.add(new $.menuModel("产品二管理员使用手册", "#", "13", "12"));
        menuItems.add(new $.menuModel("产品二财务人员使用手册", "#", "14", "12"));
        menuItems.add(new $.menuModel("产品二特点", "#", "15", "11"));
        menuItems.add(new $.menuModel("产品二价格", "#", "16", "11"));
        menuItems.build("navRoot");
    </script>