I am trying to set menu (ul element) z-index bellow the window and all children (on root item hover - .k-animation-container) greater then window z-index.
I try to set .k-animation-container z-index higher then window, but it doesn't work.
How can I display menu root items bellow window and all non-root items (everything that opens, including popup menu) above window?
1 Answer, 1 is accepted
0
Accepted
Hello Matjaž,
The observed behavior is caused by the way the z-index property works in general. The z-index of a child element cannot be higher of the one of its parent element.
The .k-animation-container div is a child of the corresponding expanded LI element, which in turn is a child either of another .k-animation-container div, or of the root UL the Kendo UI Menu is initialized from. Therefore it is not possible to show one sub-menu level below the Kendo UI Window, and another - on top of it.
You can only set the z-index of the root UL's descendant LIs to be higher than the Window's one, and therefore show all sub-menus on top of the Window:
http://dojo.telerik.com/EkIlI/2
Regards,
Dimiter Topalov
Telerik by Progress
The observed behavior is caused by the way the z-index property works in general. The z-index of a child element cannot be higher of the one of its parent element.
The .k-animation-container div is a child of the corresponding expanded LI element, which in turn is a child either of another .k-animation-container div, or of the root UL the Kendo UI Menu is initialized from. Therefore it is not possible to show one sub-menu level below the Kendo UI Window, and another - on top of it.
You can only set the z-index of the root UL's descendant LIs to be higher than the Window's one, and therefore show all sub-menus on top of the Window:
http://dojo.telerik.com/EkIlI/2
Regards,
Dimiter Topalov
Telerik by Progress
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.