jQuery easyui下拉菜单被layout遮挡

home不是.后面再出现就是了.设置过z-index了.也不行

你试试在菜单下垫个iframe

贴代码，而且你的导航条是在父页面的还是放到框架里面的？放框架里面无法超出框架范围。在父页面设置z-index高于遮盖的内容在firefox，chrome不会被遮盖，在ie下下拉菜单的位置和遮盖的内容依据位置关系，下拉菜单可能被遮盖住，这得看布局了

导航条是在框架里.布局是easyu里的那个布局..

导航条是在框架里.布局是easyu里的那个布局..
那肯定不行了。。框架里面的额内容无法超出框架显示在父页上面。。将菜单放到主页面来，而不是放到框架里面。

导航条是在框架里.布局是easyu里的那个布局..
那肯定不行了。。框架里面的额内容无法超出框架显示在父页上面。。将菜单放到主页面来，而不是放到框架里面。
所有页面都是在框架里显示的.放在主页面上啊

导航条是在框架里.布局是easyu里的那个布局..
那肯定不行了。。框架里面的额内容无法超出框架显示在父页上面。。将菜单放到主页面来，而不是放到框架里面。
所有页面都是在框架里显示的.放在主页面上啊
easyui的布局也是放在框架里面？最好贴个可以测试的代码，这样说不清。。

这里是html代码<body class="easyui-layout">
<div region="north" title="这里是头部"  style="height:100px;padding:10px; background-color:#D2E0F2; overflow:hidden;">
        <div class="nav">
            <ul>
        <li class="meun in1"><a href="#">首页</a>
                <ul id="sub_01" class="sub" >
    <li><a href="#" src="a.aspx" class="cs-navi-tab">aaaaaaaaaaaa</a></li>
    <li><a href="#" src="b.aspx" class="cs-navi-tab">bbbbbbbbbbb</a></li>
    <li><a href="#" src="c.aspx" class="cs-navi-tab">cccccccccccccc</a></li>
    <li><a href="#" src="d.aspx" class="cs-navi-tab">ddddddddddd</a></li>
                    <li><a href="#" src="e.aspx" class="cs-navi-tab">eeeeeeeeeeeee</a></li>
    </ul>
            </li>
    <li class="meun in2"><a href="#">关于我们</a>
    <ul id="sub_02" class="sub" >
    <li><a href="#">公司介绍</a></li>
    <li><a href="#">企业文化</a></li>
    <li><a href="#">人才招聘</a></li>
    <li><a href="#">公司大事记</a></li>
    </ul>
    </li>
    <li class="meun in3"><a href="#">新闻动态</a>
                <ul id="sub_03" class="sub" >
    <li><a href="#">新闻动态11111111新闻动态</a></li>
    <li><a href="#">新闻动态222222222新闻动态2</a></li>
    <li><a href="#">新闻动态33333333新闻动态</a></li>
    <li><a href="#">新闻动态4444444444444444新闻动态</a></li>
    </ul>
            </li>
        </ul>
    </div>
</div>
<div region="south" title="这里是Footer " style="height:200px;padding:1px;background:#efefef;"> </div>
<div region="west" title="这里是Tree" class="cs-west">
<div class="easyui-accordion"  border="false">
            <a href="javascript:void(0);" src="a.aspx" class="cs-navi-tab">aaaaaaaaaaa</a><p />
            <a href="javascript:void(0);" src="b.aspx" class="cs-navi-tab">bbbbbbbbbb</a><p />
            <a href="javascript:void(0);" src="c.aspx" class="cs-navi-tab">ccccccccccccc</a><p />
            <a href="javascript:void(0);" src="d.aspx" class="cs-navi-tab">dddddddddd</a><p />
             <a href="javascript:void(0);" src="e.aspx" class="cs-navi-tab">eeeeeeeeeee</a>
</div>
</div>
<div region="center" title="" style="overflow:hidden;">
<div id="tabs" class="easyui-tabs"  fit="true" border="trun" >
            <div title="Home">
    <div class="cs-home-re">
    <p><h1>这里是home</h1> </p>
                    <p><h1>HOME   HOME   HOME   HOME   HOME   HOME   HOME   HOME   HOME   HOME   HOME   HOME   HOME   HOME</h1></p>
    </div>
</div>
        </div>
</div>
</body>这里是js<script type="text/javascript">
        function addmenu() {
            var header = $('.layout-expand .layout-button-down').parent().parent();
            var menu = $('<div style="position:absolute;left:0;top:0;background:#fafafa;"></div>').appendTo(header);
            var btn = $('<a href="#">test</a>').appendTo(menu);
            btn.menubutton({
                menu: '#mymenu'
            });
        }
            $(function () {
                $('.meun').hover(function () { $(this).find('ul').stop(true, true).slideDown(); },
            function () {
                $(this).find('ul').stop(true, true).slideUp('fast');
            })
        })         function addTab(title, url) {
            if ($('#tabs').tabs('exists', title)) {
                $('#tabs').tabs('select', title);
                var currTab = $('#tabs').tabs('getSelected');
                var url = $(currTab.panel('options').content).attr('src');
                if (url != undefined && currTab.panel('options').title != 'Home') {
                    $('#tabs').tabs('update', {
                        tab: currTab,
                        options: {
                            content: createFrame(url)
                        }
                    })
                }
            } else {
                var content = createFrame(url);
                $('#tabs').tabs('add', {
                    title: title,
                    content: content,
                    closable: true
                });
            }
            tabClose();
        }
        function createFrame(url) {
            var s = '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
            return s;
        }     </script>

加了iframe 导航就显示不出来了..

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
</head><body>
<body class="easyui-layout">
    <div region="north" title="这里是头部"  style="padding:10px; background-color:#D2E0F2; overflow:hidden;">
        <div class="nav">
            <ul>
            <li class="meun in1"><a href="#">首页</a>
                <ul id="sub_01" class="sub" >
                    <li><a href="#" src="a.aspx" class="cs-navi-tab">aaaaaaaaaaaa</a></li>
                    <li><a href="#" src="b.aspx" class="cs-navi-tab">bbbbbbbbbbb</a></li>
                    <li><a href="#" src="c.aspx" class="cs-navi-tab">cccccccccccccc</a></li>
                    <li><a href="#" src="d.aspx" class="cs-navi-tab">ddddddddddd</a></li>
                    <li><a href="#" src="e.aspx" class="cs-navi-tab">eeeeeeeeeeeee</a></li>
                </ul>
            </li>
            <li class="meun in2"><a href="#">关于我们</a>
                <ul id="sub_02" class="sub" >
                    <li><a href="#">公司介绍</a></li>
                    <li><a href="#">企业文化</a></li>
                    <li><a href="#">人才招聘</a></li>
                    <li><a href="#">公司大事记</a></li>
                </ul>
            </li>
            <li class="meun in3"><a href="#">新闻动态</a>
                <ul id="sub_03" class="sub" >
                    <li><a href="#">新闻动态11111111新闻动态</a></li>
                    <li><a href="#">新闻动态222222222新闻动态2</a></li>
                    <li><a href="#">新闻动态33333333新闻动态</a></li>
                    <li><a href="#">新闻动态4444444444444444新闻动态</a></li>
                </ul>
            </li>
            </ul>
    </div>
    </div>
    <div region="south" title="这里是Footer " style="height:200px;padding:1px;background:#efefef;">

    </div>
    <div region="west" title="这里是Tree" class="cs-west">
        <div class="easyui-accordion"  border="false">
            <a href="javascript:void(0);" src="a.aspx" class="cs-navi-tab">aaaaaaaaaaa</a><p />
            <a href="javascript:void(0);" src="b.aspx" class="cs-navi-tab">bbbbbbbbbb</a><p />
            <a href="javascript:void(0);" src="c.aspx" class="cs-navi-tab">ccccccccccccc</a><p />
            <a href="javascript:void(0);" src="d.aspx" class="cs-navi-tab">dddddddddd</a><p />
             <a href="javascript:void(0);" src="e.aspx" class="cs-navi-tab">eeeeeeeeeee</a>
        </div>
    </div>
    <div region="center" title="" style="overflow:hidden;">
        <div id="tabs" class="easyui-tabs"  fit="true" border="trun" >
            <div title="Home">
                <div class="cs-home-re">
                    <p><h1>这里是home</h1> </p>
                    <p><h1>HOME   HOME   HOME   HOME   HOME   HOME   HOME   HOME   HOME   HOME   HOME   HOME   HOME   HOME</h1></p>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
            function addmenu() {
                var header = $('.layout-expand .layout-button-down').parent().parent();
                var menu = $('<div style="position:absolute;left:0;top:0;background:#fafafa;"></div>').appendTo(header);
                var btn = $('<a href="#">test</a>').appendTo(menu);
                btn.menubutton({
                    menu: '#mymenu'
                });
            }
            $(function () {
                $('.meun').hover(function () { $(this).find('ul').stop(true, true).slideDown(); },
            function () {
                $(this).find('ul').stop(true, true).slideUp('fast');
            })
        })

            function addTab(title, url) {
                if ($('#tabs').tabs('exists', title)) {
                    $('#tabs').tabs('select', title);
                    var currTab = $('#tabs').tabs('getSelected');
                    var url = $(currTab.panel('options').content).attr('src');
                    if (url != undefined && currTab.panel('options').title != 'Home') {
                        $('#tabs').tabs('update', {
                            tab: currTab,
                            options: {
                                content: createFrame(url)
                            }
                        })
                    }
                } else {
                    var content = createFrame(url);
                    $('#tabs').tabs('add', {
                        title: title,
                        content: content,
                        closable: true
                    });
                }
                tabClose();
            }
            function createFrame(url) {
                var s = '<iframe scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
                return s;
            }

        </script>
</body>
</body>
</html>
去掉height，要不把列表做成绝对定位的

@veryhunger
去掉哪个height...

<div region="north" title="这里是头部" style="padding:10px; backgr 里面的

去掉div中的样式：overflow:hidden

我也碰到這個問題，Div讓North的布局給檔住了，樓主解決沒，分享一下方法

我这样做可以了。有问题的同学也可以试下
.layout-panel{
position: static
} <div id="menu" style="z-index:20;position: absolute;" >

直接在菜单div 中改为position:fixed

jquery layout 的js文件中的showOverflowOnHover属性改为true就好了，详细参看jquery layout api

看好标题，说到jquery easyui中layout 不是jquery layout 。

我用的是easyui 1.3.6版本，
.panel {
  /*overflow:hidden;*/
  text-align: left;
  margin: 0;
  border: 0;
  -moz-border-radius: 0 0 0 0;
  -webkit-border-radius: 0 0 0 0;
  border-radius: 0 0 0 0;
}
.layout-panel {
  position: absolute;
  /*overflow:hidden;*/
} 屏蔽掉就可以用了。

调试易

jQuery easyui下拉菜单被layout遮挡

解决方案 »