title: Parent loses focus on Kendo UI Context Menu
body: <p>I have hovered sidebar on my page which have links for using search filters. Each link have click listener which opens Kendo UI context menu for some actions for current link. When I open Kendo Context Menu, sidebar hover is lost. How can I keep sidebar focus when user mouseenter context menu?</p>
  
  <p><a href="http://jsfiddle.net/oqa4aa9m/15/" rel="nofollow">JS Fiddle is here</a></p>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$(document).ready(function() {
      $('#nav').hover(function(){
          $(this).animate({width:'200px'},150);
      },function(){
          $(this).animate({width:'35px'},150);
      });
  
      $("#menu").click(function(e) {
          var menuHtml = $("#menu-template").html();
  
          $(menuHtml).kendoContextMenu({
              target: $(e.currentTarget),
              close: function() {
                  this.destroy();
              },
              select: function(e) {
                  var sel = $(e.item).attr('id');
              }
          }).data("kendoContextMenu").open();
      });
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="nav"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a id="menu"&gt;Click here&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;script id="menu-template" type="text/x-kendo-template"&gt;
      &lt;ul&gt;
          &lt;li id='rename'&gt;Rename&lt;/li&gt;
          &lt;li id='delete'&gt;Delete&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#nav { 
      width:200px;
      height:100%;
      position:absolute;
      top:0;
      left:0;
      z-index:100;
      background:#666;
      color:#fff;
      overflow:hidden;
  }
  
  #nav ul {
      margin:0;
      padding:0;
      width:200px;
      margin:40px;
      list-style:none;
  }
  
  #nav a span {
      margin:0 10px 0 0;
  }
  
  #nav a {
      color:#fff;
      font-size:14px;
  }
  </code></pre>