UL下拉菜单(三级)，可遮挡ActiveX等高显示优先级元素

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <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;
            background-color: Red;
        }
        .navRoot li ul li ul li
        {
            margin: 0px;
            padding: 0px;
            white-space: nowrap;
        }
    </style>
    <script type="text/javascript">

        function displaySubMenu(li) {
            var ifr;
            //firstNode为li中包含的div,此div用作包含ul,并在ul后放置iframe用于遮挡ActiveX等高显示优先级元素
            var firstNode = li.children[1];
            //判断iframe是否已创建
            if (firstNode.children[1]) {
                ifr = firstNode.children[1];
            }
            else {
                ifr = document.createElement("iframe");
            }

            //设置div为浮动
            firstNode.style.cssText = "position:absolute;left:0px;top:0px;";
            firstNode.style.display = "block";

            //iframe设置样式，宽高与同级ul元素相同，设置隐藏
            ifr.style.cssText = "left:0;top:0;display:block";
            var subMenu = li.getElementsByTagName("ul")[0];
            ifr.style.width = subMenu.offsetWidth;
            ifr.style.height = subMenu.offsetHeight;
            ifr.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0)';

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

            //在div后追加iframe
            firstNode.appendChild(ifr);
        }
        function hideSubMenu(li) {
            var e = window.event;
            var target_element = e.toElement;
            //当执行鼠标移出时，判断是否移出到当前li的子元素(子菜单上)，是则不执行隐藏操作
            if (!li.contains(target_element)) {
                var subMenu = li.getElementsByTagName("ul")[0];
                var firstNode = li.children[1];
                if (firstNode.children[1]) {
                    firstNode.removeChild(firstNode.children[1]);
                }
                firstNode.style.display = "none";
            }
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <textarea id="txtMess" rows="15" cols="50"></textarea>
    <ul class="navRoot">
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)" style="float: left;">
            <a href="#">产品介绍太长了真的太长了</a>
            <div style="display: none">
                <ul>
                    <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">产品一</a>
                        <div style="display: none">
                            <ul>
                                <li><a href="#">子菜单一</a></li>
                                <li><a href="#">产品一用户评价</a></li>
                            </ul>
                        </div>
                    </li>
                    <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">产品二</a>
                        <div style="display: none">
                            <ul>
                                <li><a href="#">产品二图片展示</a></li>
                                <li><a href="#">产品二用户评价</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>
            </div>
        </li>
        <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)" style="float: left;">
            <a href="#">服务介绍</a>
            <div style="display: none">
                <ul>
                    <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">服务一</a>
                        <div style="display: none">
                            <ul>
                                <li><a href="#">服务一图片展示</a></li>
                                <li><a href="#">服务一用户评价</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">服务二</a></li>
                    <li><a href="#">服务三</a></li>
                    <li><a href="#">服务四</a></li>
                    <li onmouseover="displaySubMenu(this)" onmouseout="hideSubMenu(this)"><a href="#">服务五</a>
                        <div style="display: none">
                            <ul>
                                <li><a href="#">服务五图片展示</a></li>
                                <li><a href="#">服务五用户评价</a></li>
                            </ul>
                        </div>
                    </li>
                    <li><a href="#">服务六</a></li>
                </ul>
            </div>
        </li>
    </ul>
    </form>
</body>
</html>

posted on 2011-04-28 13:05 雨季阅读(861) 评论(0) 编辑收藏举报

刷新页面返回顶部

UL下拉菜单(三级)，可遮挡ActiveX等高显示优先级元素

公告