diff --git a/build/scss/_main-sidebar.scss b/build/scss/_main-sidebar.scss
index 2946c40d8..ba59a99a0 100644
--- a/build/scss/_main-sidebar.scss
+++ b/build/scss/_main-sidebar.scss
@@ -845,9 +845,9 @@
   }
 
   .sidebar-mini.sidebar-collapse .main-sidebar.sidebar-focused &,
-  .sidebar-mini.sidebar-collapse .main-sidebar:hover &,
+  .sidebar-mini.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover &,
   .sidebar-mini-md.sidebar-collapse .main-sidebar.sidebar-focused &,
-  .sidebar-mini-md.sidebar-collapse .main-sidebar:hover & {
+  .sidebar-mini-md.sidebar-collapse .main-sidebar:not(.sidebar-no-expand):hover & {
     .menu-open > .nav-treeview {
       max-height: min-content;
       animation-name: fadeIn;
diff --git a/dist/js/demo.js b/dist/js/demo.js
index 65fc83fcf..ea13c61f7 100644
--- a/dist/js/demo.js
+++ b/dist/js/demo.js
@@ -181,6 +181,21 @@
   var $child_indent_sidebar_container = $('<div />', { class: 'mb-1' }).append($child_indent_sidebar_checkbox).append('<span>Sidebar nav child indent</span>')
   $container.append($child_indent_sidebar_container)
 
+  var $child_hide_sidebar_checkbox = $('<input />', {
+    type: 'checkbox',
+    value: 1,
+    checked: $('.nav-sidebar').hasClass('nav-collapse-hide-child'),
+    class: 'mr-1'
+  }).on('click', function () {
+    if ($(this).is(':checked')) {
+      $('.nav-sidebar').addClass('nav-collapse-hide-child')
+    } else {
+      $('.nav-sidebar').removeClass('nav-collapse-hide-child')
+    }
+  })
+  var $child_hide_sidebar_container = $('<div />', { class: 'mb-1' }).append($child_hide_sidebar_checkbox).append('<span>Sidebar nav child hide on collapse</span>')
+  $container.append($child_hide_sidebar_container)
+
   var $no_expand_sidebar_checkbox = $('<input />', {
     type: 'checkbox',
     value: 1,