How to show drop down of my navbar only on click?

I have a dynamic navbar that get url data from database; it works fine on computer but if I try to access dropdowns with my mobile, doesn't show anything.

My code is like this:

<ul id="navBar"></ul>

$(document).ready(function() {
   $.ajax({
    type: 'Get',
    url: '@Url.Action("GetDataForNavBar", controllerName, new { Area="" })',
    success: function (data) {
        $("#navBar").kendoMenu({
            dataSource: data.data
        });
    }
   });
});

public ActionResult GetDataForNavBar(){
    List<MenuOptions> optionMenu = ManagerService.MenuOptionsManager.GetAll().ToList();            
    List<MenuOptions> menusParent = optionMenu.Where(a => a.parent == null).ToList();            

    foreach (MenuOptions menu in menusParent)
    {
        menu.children.AddRange(optionMenu.Where(a => a.parent == menu.id));                
    }

    //Create list for view
    var result = menusParent.Select(a => new
    {
        text = a.title,
        items = a.children.Where(b => b.parent == a.id).Select(c => new
        {
            text = c.title,
            url = Url.Action(c.view, c.controller, new { Area = c.area })
        }).ToList()
    });

    return Json(new { data = result }, JsonRequestBehavior.AllowGet);
}

I add this to the menu configuration to solve it

openOnClick: {
    rootMenuItems: true
}