diff --git a/css/dist/components/dropbutton.css b/css/dist/components/dropbutton.css
index 0e0e318..1e27c0c 100644
--- a/css/dist/components/dropbutton.css
+++ b/css/dist/components/dropbutton.css
@@ -54,12 +54,16 @@
   display: block;
   list-style: none;
   margin: 0;
-  overflow: visible;
+  overflow: hidden;
 }
 [dir="rtl"] .dropbutton {
   margin: 0;
 }
 
+.dropbutton-wrapper.open .dropbutton {
+  overflow: visible;
+}
+
 .js .dropbutton {
   height: 3rem;
 }
@@ -79,11 +83,13 @@
 .js .dropbutton--multiple .dropbutton__item:first-of-type {
   margin-right: -webkit-calc(3rem + 1px);
   margin-right: calc(3rem + 1px); /* LTR */
+  white-space: nowrap;
 }
 [dir="rtl"].js .dropbutton--multiple .dropbutton__item:first-of-type {
   margin-right: 0;
   margin-left: -webkit-calc(3rem + 1px);
   margin-left: calc(3rem + 1px);
+  text-align: right;
 }
 
 /* First dropbutton list item variants */
@@ -337,10 +343,17 @@
   text-align: right;
 }
 
-.js .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
+/* hide the list items of dropdown before JS is loaded
+   to prevent seeing an open list of items when page is loading  */
+.dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
   display: none;
 }
 
+/* once JS is loaded, we can safely display the items, since they are hidden using overflow anyway  */
+.js .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
+  display: block;
+}
+
 /**
  * Non-first dropbutton list elements.
  */
diff --git a/css/src/components/dropbutton.css b/css/src/components/dropbutton.css
index 6227708..0d3a6f9 100644
--- a/css/src/components/dropbutton.css
+++ b/css/src/components/dropbutton.css
@@ -60,12 +60,16 @@
   display: block;
   list-style: none;
   margin: 0;
-  overflow: visible;
+  overflow: hidden;
 }
 [dir="rtl"] .dropbutton {
   margin: 0;
 }
 
+.dropbutton-wrapper.open .dropbutton {
+  overflow: visible;
+}
+
 .js .dropbutton {
   height: var(--dropbutton-toggle-size);
 }
@@ -84,10 +88,12 @@
  */
 .js .dropbutton--multiple .dropbutton__item:first-of-type {
   margin-right: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing)); /* LTR */
+  white-space: nowrap;
 }
 [dir="rtl"].js .dropbutton--multiple .dropbutton__item:first-of-type {
   margin-right: 0;
   margin-left: calc(var(--dropbutton-toggle-size) + var(--dropbutton-toggle-size-spacing));
+  text-align: right;
 }
 
 /* First dropbutton list item variants */
@@ -309,10 +315,17 @@
   text-align: right;
 }
 
-.js .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
+/* hide the list items of dropdown before JS is loaded
+   to prevent seeing an open list of items when page is loading  */
+.dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
   display: none;
 }
 
+/* once JS is loaded, we can safely display the items, since they are hidden using overflow anyway  */
+.js .dropbutton-wrapper:not(.open) .dropbutton__item:first-of-type ~ .dropbutton__item {
+  display: block;
+}
+
 /**
  * Non-first dropbutton list elements.
  */