diff --git a/webroot/css/layout.css b/webroot/css/layout.css
index ac9a9bdf3..909871795 100644
--- a/webroot/css/layout.css
+++ b/webroot/css/layout.css
@@ -174,7 +174,7 @@ main.content {
         top: 50%;
     }
     .sidebar .sidebar-link-container:hover .submenu-container {
-        display: block;
+        /* display: block; */
     }
     .sidebar .sidebar-link-container .submenu-container:hover {
         display: block;
diff --git a/webroot/js/main.js b/webroot/js/main.js
index 069176819..7daf5a151 100644
--- a/webroot/js/main.js
+++ b/webroot/js/main.js
@@ -321,4 +321,17 @@ $(document).ready(() => {
     $('.sidebar #btn-add-bookmark').click(() => {
         openSaveBookmarkModal(window.location.pathname)
     })
+
+    $('.sidebar .sidebar-link-container.parent').on('mouseenter', function() {
+        const $subContainer = $(this).find('.submenu-container')
+        $subContainer.css({ display: 'block' })
+        $(this).on('mouseleave', function() {
+            delay(function () {
+                if (!$subContainer[0].matches(':hover')) {
+                    $subContainer.css({ display: 'none' })
+                    $(this).trigger('mouseenter')
+                }
+            }, 150)
+        })
+    })
 })
diff --git a/webroot/js/utils.js b/webroot/js/utils.js
index 1a04fb02d..60d369abd 100644
--- a/webroot/js/utils.js
+++ b/webroot/js/utils.js
@@ -147,6 +147,10 @@ function debounce(func, wait, options) {
     return debounced
 }
 
+function delay(func, wait, ...args) {
+    return setTimeout(func, wait, ...args)
+}
+
 function arrayEqual(array1, array2) {
     const array2Sorted = array2.slice().sort();
     return array1.length === array2.length && array1.slice().sort().every((value, index) => value === array2Sorted[index])