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
and here is the Layout.css
I've tried to set z-index on secHeader1, .k-menu .k-animation-container, etc, none of them worked.
Please advise.
Thank you
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%
;}
#secHeader
1
{
position
:
absolute
;
overflow
:
hidden
;
width
:
100%
;
height
:
75px
;
left
:
0
;
top
:
0px
;
background-color
:
#8a0000
;}
#secHeader
2
{
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
;}
Please advise.
Thank you