diff --git a/docs/site/assets/css/page.css b/docs/site/assets/css/page.css
index 5b1117833d5..f664feac2a8 100644
--- a/docs/site/assets/css/page.css
+++ b/docs/site/assets/css/page.css
@@ -43,20 +43,36 @@ header .nav ul b {
     color: gray;
 }
 
+.title ul.subpages {
+    display: none;
+}
+
+.title:hover ul.subpages {
+    display: block;
+}
+
 header .nav .crumb {
     color: white;
     margin: .5em;
 }
 
 header .nav ul {
-    display: inline-flexbox;
-    width: 90%;
+    display: inline;
+    /* width: 90%; */
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 1;
+    background-color: navy;
+    /* background-color: white;
+    position: absolute; */
+    padding: 0.5３m；
 }
 
 header .nav ul li {
-    display: inline-flex;
+    display: block;
     padding: .5em;
+    font-size: medium;
     margin: 0;
+    /* color: black !important; */
 }
 
 header .message {
diff --git a/docs/site/assets/js/cldrsite.js b/docs/site/assets/js/cldrsite.js
index e229fb988b3..390be9ff373 100644
--- a/docs/site/assets/js/cldrsite.js
+++ b/docs/site/assets/js/cldrsite.js
@@ -204,8 +204,11 @@ const app = Vue.createApp(
         <span class="ancestor" v-for="ancestor of ancestorPages" :key="ancestor.href">
           <a class="uplink" v-bind:href="ancestor.href">{{ ancestor.title }}</a><span class="crumb">❱</span>
         </span>
-        <span class="title"> {{ ourTitle }} </span>
-        <ul class="subpages">
+        <div v-if="!siblingPages || !siblingPages.length" class="title"> {{ ourTitle }} </div>
+        <div v-else class="title"><span class="hamburger">≡</span>
+
+        {{ ourTitle }}
+                 <ul class="subpages">
             <li v-for="subpage of siblingPages" :key="subpage.path">
                 <span v-if="path == subpage.html">
                     <b>{{ subpage.title }}</b>
@@ -215,6 +218,8 @@ const app = Vue.createApp(
                 </a>
             </li>
         </ul>
+  </div>
+
     </div>`,
   },
   {