diff --git a/addons/web/static/src/core/dropdown/dropdown.scss b/addons/web/static/src/core/dropdown/dropdown.scss
index f250c5de02c..3a059e39ac8 100644
--- a/addons/web/static/src/core/dropdown/dropdown.scss
+++ b/addons/web/static/src/core/dropdown/dropdown.scss
@@ -5,6 +5,12 @@
     // Makes sure the dropdown menus are already in a
     // fixed position before the positioning computations begin.
     position: fixed;
+    margin-top: var(--Dropdown_menu-margin-y, #{map-get($spacers, 1)});
+    margin-bottom: var(--Dropdown_menu-margin-y, #{map-get($spacers, 1)});
+
+    &.o-dropdown--menu-submenu {
+      --Dropdown_menu-margin-y: 0;
+    }
 
     .dropdown-toggle:focus, .dropdown-item:focus {
       background-color: transparent;
diff --git a/addons/web/static/src/core/dropdown/dropdown.xml b/addons/web/static/src/core/dropdown/dropdown.xml
index dbcd24aff1b..c1e0c413fb2 100644
--- a/addons/web/static/src/core/dropdown/dropdown.xml
+++ b/addons/web/static/src/core/dropdown/dropdown.xml
@@ -33,7 +33,11 @@
       </button>
       <div
         t-if="state.open"
-        t-attf-class="o-dropdown--menu dropdown-menu {{ props.menuDisplay }}"
+        t-attf-class="
+          o-dropdown--menu dropdown-menu
+          {{ parentDropdown ? 'o-dropdown--menu-submenu' : '' }}
+          {{ props.menuDisplay }}
+        "
         t-att-class="props.menuClass"
         role="menu"
         t-ref="menuRef"
diff --git a/addons/web/static/src/webclient/navbar/navbar.scss b/addons/web/static/src/webclient/navbar/navbar.scss
index 4705bd09b38..e106cb900ac 100644
--- a/addons/web/static/src/webclient/navbar/navbar.scss
+++ b/addons/web/static/src/webclient/navbar/navbar.scss
@@ -3,6 +3,7 @@
 // ============================================================================
 .o_main_navbar {
     @include print-variable(o-navbar-height, $o-navbar-height);
+    --Dropdown_menu-margin-y: 0;
 
     display: flex;
     height: var(--o-navbar-height);