剑道菜单第一次错误的位置项目答案

【问题标题】：Kendo menu wrong position items first time剑道菜单第一次错误的位置项目
【发布时间】：2017-03-06 15:08:13
【问题描述】：

我在使用其中一个剑道控件 - 菜单时遇到问题。
问题是当我打开带有C 项目的子菜单时，它的容器位置错误。它发生在所有元素上，但仅在它们被扩展时才第一次发生。

演示http://dojo.telerik.com/UhaKI

为了重现问题，我刚刚添加了高度较大的空 div 元素。
打开链接并向下滚动到底部，打开并展开 2008 项目。如何解决？

【问题讨论】：

我无法告诉您如何解决它，但当 Kendo 布局子菜单时，是您的自定义样式干扰了它。如果您删除“浮动：左；”在“li.year-item > div.k-animation-container ul li.k-item”样式上，问题消失了……但你没有得到你想要的 2 列布局。
是的，我注意到了，但我需要两列菜单。
脚本不能快速计算右高度菜单，当你把项目放在两行时......（（
@mihkov 我还在努力解决问题

标签： html css kendo-ui kendo-menu

【解决方案1】：

让我们试试这里的建议：http://www.telerik.com/forums/multi-column-menu。

.k-menu .year-item {
    width: 120px;
}
.k-menu .year-item .k-item {
    float: left;
    width: 50px;
}

http://dojo.telerik.com/@Stephen/EvAPI

【讨论】：

刚刚发现一个愚蠢的 JS 解决方法，包括在您发布之前的两个嵌套 setTimeout 函数，但您的解决方案正是我想要的。谢谢 :) 啤酒++；

【解决方案2】：

看看这个解决方案

ul#menu {
    background-color: green;  color: white;
  }
  li.year-item  div.k-animation-container {
    width: 120px !important;
    top: 0 !important;
    height: auto !important;
  }

  li.year-item >  div.k-animation-container ul li.k-item {
    width: 50%;

}
  .k-menu .k-menu-group>.k-item {
    position: static;
  }

  li.year-item >  div.k-animation-container ul {
    display: flex !important;
    flex-wrap: wrap;
  }

  #big{ 
    height: 1300px;
  }

直播 - http://dojo.telerik.com/ExAqo

【讨论】：

好的，感谢您的帮助，它以某种方式修复了外观。但是您的解决方案删除了动画和右箭头，我还需要菜单出现在年份旁边。问题只是第一次悬停时计算出错误的位置。
@mihkov 是的，我明白了，但是这个错误变成了脚本（
有没有办法用最少的js代码来修复它？例如在 Open 事件上。？
@mihkov 我认为需要写信给剑道团队