diff --git a/_includes/header.html b/_includes/header.html
index 0712951de5bb..31e1fd2a4b19 100644
--- a/_includes/header.html
+++ b/_includes/header.html
@@ -46,6 +46,25 @@
           {% assign sorted_pages = site.pages | sort: "title" %}
           {% for p in sorted_pages %}
           {% if p.nav and p.autogen == nil %}
+          {% if p.dropdown %}
+          <li class="nav-item dropdown {% if page.title == p.title %}active{% endif %}">
+              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                {{ p.title }}
+                {% if page.title == p.title %}
+                <span class="sr-only">(current)</span>
+                {% endif %}
+              </a>
+              <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdown">
+              {% for child in p.children %}
+              {% if child.title == 'divider' %}
+                <div class="dropdown-divider"></div>
+              {% else %}
+                <a class="dropdown-item" href="{{ child.permalink | relative_url }}">{{ child.title }}</a>
+              {% endif %}
+              {% endfor %}
+              </div>
+          </li>
+          {% else %}
           <li class="nav-item {% if page.title == p.title %}active{% endif %}">
               <a class="nav-link" href="{{ p.url | relative_url }}">
                 {{ p.title }}
@@ -55,6 +74,7 @@
               </a>
           </li>
           {% endif %}
+          {% endif %}
           {% endfor %}
           {% if site.enable_darkmode %}
             <div class = "toggle-container">
diff --git a/_pages/dropdown.md b/_pages/dropdown.md
new file mode 100644
index 000000000000..578b3723cf7e
--- /dev/null
+++ b/_pages/dropdown.md
@@ -0,0 +1,12 @@
+---
+layout: page
+title: submenus
+nav: true
+dropdown: true
+children: 
+    - title: publications
+      permalink: /publications/
+    - title: divider
+    - title: projects
+      permalink: /projects/
+---
\ No newline at end of file
diff --git a/_sass/_base.scss b/_sass/_base.scss
index dc9edcdfb7e1..160744003c37 100644
--- a/_sass/_base.scss
+++ b/_sass/_base.scss
@@ -14,7 +14,7 @@ a, table.table a {
     color: var(--global-theme-color);
     text-decoration: underline;
   }
-  &:hover:after {
+  &:hover:after :not(.nav-item.dropdown) {
     width: 100%;
   }
 }
@@ -95,6 +95,22 @@ blockquote {
   background-color: var(--global-bg-color);
   opacity: 0.95;
 }
+.navbar .dropdown-menu {
+  background-color: var(--global-bg-color);
+  a:not(.active) {
+    color: var(--global-text-color);
+  }
+  a:hover {
+    color: var(--global-hover-color);
+  }
+}
+.dropdown-item {
+  color: var(--global-text-color);
+    &:hover {
+      color: var(--global-hover-color);
+      background-color: var(--global-bg-color);
+    }
+}
 .navbar.navbar-light {
   a {
     &:hover {