This is a migrated thread and some comments may be shown as answers.

Menu z-index, hidden behind absolute positioned div

2 Answers 634 Views
Menu
This is a migrated thread and some comments may be shown as answers.
HSO
Top achievements
Rank 2
HSO asked on 03 Apr 2013, 09:44 PM
Hello:

I have a layout page with 4 absolute positioned divs, Header 1, Header 2, Content, and Footer.
Header 1 & 2, and Footer are sticky divs, only the Content div can scroll vertically.

I put the Menu on Header 1, the expanded menu is hidden behind the Header 2.
Here is my html layout

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href="styles/kendo.common.min.css" rel="stylesheet" />
    <link href="styles/kendo.default.min.css" rel="stylesheet" />
    <link href="styles/layout.css" rel="stylesheet" />
    <script src="js/jquery.min.js"></script>
    <script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="secHeader1">
    header 1
    <div style="width: 120px; float:right;">
        <ul id="menu">
            <li>
                Products
                <ul>
                    <li>Furniture</li>
                    <li>Decor</li>
                    <li>Storage</li>
                    <li>Lights</li>
                </ul>
            </li>
        </ul>
        <script>
            $(document).ready(function() {
                $("#menu").kendoMenu();
            });
        </script>
    </div>
</div>
<div id="secHeader2">
    header 2
</div>
<div id="secContent">
    content body
</div>
<div id="secFooter">
    footer
</div>
 
</body>
</html>


and here is the Layout.css

* {margin:0; padding:0;}
html, body, form {margin:0; padding:0; height: 100%; color:#ffffff;}
html>body>form {position:absolute; width:100%;}
 
 
#secHeader1 {
position:absolute; overflow:hidden;  
width:100%; height:75px;
left:0; top:0px; background-color:#8a0000;}
 
#secHeader2 {
position:absolute; overflow:hidden;  
width:100%; height:75px;    
left:0; top:75px; background-color:#666666;}
 
#secContent {
position:absolute; overflow:hidden;  
width:100%;                 
left:0; top:150px; bottom:31px; background-color:#0c0c0c;}
 
#secFooter  {
position:absolute; overflow:hidden;  
width:100%; height:30px;    
left:0; bottom:0;                  
background-color:#606060; border-top:1px solid #a0a0a0;}
I've tried to set z-index on secHeader1, .k-menu .k-animation-container, etc, none of them worked.

Please advise.
Thank you

2 Answers, 1 is accepted

Sort by
0
Accepted
Kamen Bundev
Telerik team
answered on 04 Apr 2013, 11:21 AM
Hi Jason,

You've placed the Menu in a container with overflow: hidden, which will hide it. Since you have a set height, you can remove the overflow: hidden and the Menu will start showing up properly.

All the best,
Kamen Bundev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
HSO
Top achievements
Rank 2
answered on 04 Apr 2013, 02:24 PM
thank you so much!  that fixed.
Tags
Menu
Asked by
HSO
Top achievements
Rank 2
Answers by
Kamen Bundev
Telerik team
HSO
Top achievements
Rank 2
Share this question
or