Configuration showSubmenuMode

Specifies options of submenu showing and hiding.

Type: Object
Default Value: { name: "onHover", delay: { show: 0, hide: 0 } }

Show Example:
AngularJS
Knockout
jQuery
<div class="demo-page" ng-controller="demoController">
    <div class="dx-fieldset" style="width: 350px;">
        <div class="dx-field">
            <div class="dx-field-label">showSubmenuMode</div>
            <div class="dx-field-value" dx-select-box="{
                dataSource: showModes,
                bindingOptions: {
                    value: 'showMode'
                }
            }"></div>
        </div>
    </div>
    <div class="target" id="contextMenuTarget"></div>
    <div dx-context-menu="{
        dataSource: menuItems,
        target: '#contextMenuTarget',
        bindingOptions: {
            visible: 'menuVisible',
            showSubmenuMode: 'showMode'
        }
    }"></div>
</div>
var myApp = angular.module('myApp', ['dx']);
myApp.controller("demoController", function ($scope) {
    $scope.menuItems = [
        { text: 'Increase' },
        {
            text: 'Share',
            items: [
                { text: 'Send to a friend' },
                { text: 'Send to a group' }]
        },
        { text: 'Download' },
        { text: 'Comment' },
        { text: 'Favorite' }
    ];
    $scope.showMode = "onHover";
    $scope.showModes = ["onHover", "onHoverStay", "onClick"];
});
angular.element(document).ready(function () {
    angular.bootstrap(document, ['myApp']);
});
.demo-page{
    background-color: #F0F0F0;
    height: 500px;
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
}

.target {
    background-image: url(/Content/images/doc/14_2/PhoneJS/cherry.jpg);
    background-size: cover;
    height: 150px; 
    width:100px; 
    margin-top: 20px;
}
<div class="demo-page">
    <div class="dx-fieldset" style="width: 350px;">
        <div class="dx-field">
            <div class="dx-field-label">showSubmenuMode</div>
            <div class="dx-field-value" data-bind="dxSelectBox: {
                dataSource: showModes,
                value: showMode
            }"></div>
        </div>
    </div>
    <div class="target" id="contextMenuTarget"></div>
    <div data-bind="dxContextMenu: {
        dataSource: menuItems,
        target: '#contextMenuTarget',
        showSubmenuMode: showMode
    }"></div>
</div>
var myViewModel = {
    menuItems: [
        { text: 'Increase' },
        {
            text: 'Share',
            items: [
                { text: 'Send to a friend' },
                { text: 'Send to a group' }]
        },
        { text: 'Download' },
        { text: 'Comment' },
        { text: 'Favorite' }
    ],
    showMode: ko.observable("onHover"),
    showModes: ["onHover","onHoverStay","onClick"]
};
ko.applyBindings(myViewModel);
.demo-page{
    background-color: #F0F0F0;
    height: 500px;
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
}

.target {
    background-image: url(/Content/images/doc/14_2/PhoneJS/cherry.jpg);
    background-size: cover;
    height: 150px; 
    width:100px; 
    margin-top: 20px;
}
<div class="demo-page">
    <div class="dx-fieldset" style="width: 350px;">
        <div class="dx-field">
            <div class="dx-field-label">showSubmenuMode</div>
            <div class="dx-field-value" id="showModeSelector"></div>
        </div>
    </div>
    <div class="target" id="contextMenuTarget"></div>
    <div id="myContextMenu"></div>
</div>
$("#myContextMenu").dxContextMenu({
    dataSource: [
        { text: 'Increase' },
        {
            text: 'Share',
            items: [
                { text: 'Send to a friend' },
                { text: 'Send to a group' }]
        },
        { text: 'Download' },
        { text: 'Comment' },
        { text: 'Favorite' }
    ],
    target: '#contextMenuTarget',
    position: {
        my: "left top",
        at: "center"
    }
});
$("#showModeSelector").dxSelectBox({
    dataSource: ["onHover", "onHoverStay", "onClick"],
    value: "onHover",
    onValueChanged: function (e) {
        $("#myContextMenu").dxContextMenu("instance").option("showSubmenuMode", e.value);
    }
});
.demo-page{
    background-color: #F0F0F0;
    height: 500px;
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
}

.target {
    background-image: url(/Content/images/doc/14_2/PhoneJS/cherry.jpg);
    background-size: cover;
    height: 150px; 
    width:100px; 
    margin-top: 20px;
}

delay

Specifies the delay of submenu show and hiding.

Type: Object
Default Value: { show: 50, hide: 300 }

name

Specifies the mode name.

Type: String
Default Value: "onHover"
Accepted Values: "onHover"|"onClick"