diff --git a/css/dist/components/dropbutton.css b/css/dist/components/dropbutton.css
index 1d15350..fe421c5 100644
--- a/css/dist/components/dropbutton.css
+++ b/css/dist/components/dropbutton.css
@@ -46,12 +46,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;
 }
@@ -71,6 +75,7 @@
 .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;
@@ -329,10 +334,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 ec23676..b45c1ee 100644
--- a/css/src/components/dropbutton.css
+++ b/css/src/components/dropbutton.css
@@ -37,12 +37,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(--size-dropbutton-toggle);
 }
@@ -61,6 +65,7 @@
  */
 .js .dropbutton--multiple .dropbutton__item:first-of-type {
   margin-right: calc(var(--size-dropbutton-toggle) + var(--size-dropbutton-toggle-spacing)); /* LTR */
+  white-space: nowrap;
 }
 [dir="rtl"].js .dropbutton--multiple .dropbutton__item:first-of-type {
   margin-right: 0;
@@ -286,10 +291,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.
  */