diff --git a/components/lib/contextmenu/style/ContextMenuStyle.js b/components/lib/contextmenu/style/ContextMenuStyle.js
index 461a048e5..c3d50605b 100644
--- a/components/lib/contextmenu/style/ContextMenuStyle.js
+++ b/components/lib/contextmenu/style/ContextMenuStyle.js
@@ -21,6 +21,8 @@ const theme = ({ dt }) => `
 
 .p-contextmenu-submenu {
     position: absolute;
+    display: flex;
+    flex-direction: column;
     min-width: 100%;
     z-index: 1;
     padding: 0.25rem 0.25rem;
diff --git a/components/lib/menubar/style/MenubarStyle.js b/components/lib/menubar/style/MenubarStyle.js
index 791d5b061..8ff60a7fd 100644
--- a/components/lib/menubar/style/MenubarStyle.js
+++ b/components/lib/menubar/style/MenubarStyle.js
@@ -25,8 +25,8 @@ const theme = ({ dt }) => `
     flex-wrap: wrap;
 }
 
-.p-menubar-root-list > .p-menubar-item-active > .p-menubar-submenu {
-    display: block;
+.p-menubar-submenu {
+    flex-direction: column
 }
 
 .p-menubar-item-content {
@@ -243,7 +243,7 @@ const theme = ({ dt }) => `
 `;
 
 const inlineStyles = {
-    submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
+    submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'flex' : 'none' })
 };
 
 const classes = {
diff --git a/components/lib/tieredmenu/style/TieredMenuStyle.js b/components/lib/tieredmenu/style/TieredMenuStyle.js
index c2e02bc03..45286ad36 100644
--- a/components/lib/tieredmenu/style/TieredMenuStyle.js
+++ b/components/lib/tieredmenu/style/TieredMenuStyle.js
@@ -129,7 +129,7 @@ const theme = ({ dt }) => `
 `;
 
 const inlineStyles = {
-    submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'block' : 'none' })
+    submenu: ({ instance, processedItem }) => ({ display: instance.isItemActive(processedItem) ? 'flex' : 'none' })
 };
 
 const classes = {