diff --git a/_includes/nav.html b/_includes/nav.html
index e2ef458..a2fda59 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -1,5 +1,5 @@
 <ul class="nav-list">
-  {%- assign pages_list = site.html_pages | sort:"nav_order" -%}
+  {%- assign pages_list = site.html_pages | sort: "nav_order" -%}
   {%- for node in pages_list -%}
     {%- unless node.nav_exclude -%}
       {%- if node.parent == nil -%}
@@ -7,19 +7,25 @@
           {%- if page.parent == node.title or page.grand_parent == node.title -%}
             {%- assign first_level_url = node.url | absolute_url -%}
           {%- endif -%}
+          {%- if node.has_children -%}
+            <a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#arrow-right"></use></svg></a>
+          {%- endif -%}
           <a href="{{ node.url | absolute_url }}" class="nav-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
           {%- if node.has_children -%}
-            {%- assign children_list = site.html_pages | where: "parent", node.title | sort:"nav_order" -%}
-            <ul class="nav-list-child-list ">
+            {%- assign children_list = site.html_pages | where: "parent", node.title | sort: "nav_order" -%}
+            <ul class="nav-list">
             {%- for child in children_list -%}
               <li class="nav-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
                 {%- if page.url == child.url or page.parent == child.title -%}
                   {%- assign second_level_url = child.url | absolute_url -%}
                 {%- endif -%}
+                {%- if child.has_children -%}
+                  <a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#arrow-right"></use></svg></a>
+                {%- endif -%}
                 <a href="{{ child.url | absolute_url }}" class="nav-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
                 {%- if child.has_children -%}
-                  {%- assign grand_children_list = site.html_pages | where: "parent", child.title | sort:"nav_order" -%}
-                  <ul class="nav-list-child-list">
+                  {%- assign grand_children_list = site.html_pages | where: "parent", child.title | sort: "nav_order" -%}
+                  <ul class="nav-list">
                   {%- for grand_child in grand_children_list -%}
                     <li class="nav-list-item {% if page.url == grand_child.url %} active{% endif %}">
                       <a href="{{ grand_child.url | absolute_url }}" class="nav-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
diff --git a/_layouts/default.html b/_layouts/default.html
index 3e84703..2eba760 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -7,6 +7,12 @@ layout: table_wrappers
 <html lang="{{ site.lang | default: 'en-US' }}">
 {% include head.html %}
 <body>
+  <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
+    <symbol id="arrow-right" viewBox="0 0 24 24">
+      <title>Expand</title>
+      <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24H0z" fill="none"/>
+    </symbol>
+  </svg>
 
   <div class="page-wrap">
     <div class="side-bar">
diff --git a/_sass/layout.scss b/_sass/layout.scss
index d8c8164..b2b026a 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -113,8 +113,6 @@
 }
 
 .site-nav {
-  @include container;
-
   @include mq(md) {
     padding-top: $sp-8;
     padding-bottom: $gutter-spacing-sm;
@@ -165,6 +163,11 @@
   }
 }
 
+.site-title:hover,
+.site-button:hover {
+  background-color: darken($sidebar-color, 3%);
+}
+
 // stylelint-disable selector-max-type
 
 body {
diff --git a/_sass/navigation.scss b/_sass/navigation.scss
index 1bc91d5..6b5956e 100644
--- a/_sass/navigation.scss
+++ b/_sass/navigation.scss
@@ -7,66 +7,76 @@
   margin-top: 0;
   margin-bottom: 0;
   list-style: none;
-}
-
-.nav-list-child-list {
-  padding-left: $sp-3;
-  list-style: none;
-
-  .nav-list-link {
-    color: $nav-child-link-color;
-  }
 
   .nav-list-item {
-    position: relative;
+    @include fs-4;
+    margin: 0;
 
-    &::before {
+    @include mq(md) {
+      @include fs-3;
+    }
+
+    .nav-list-link {
+      display: block;
+      height: $nav-list-item-height;
+      line-height: #{$nav-list-item-height - 2 * $sp-1};
+      padding-top: $sp-1;
+      padding-right: $gutter-spacing-sm;
+      padding-bottom: $sp-1;
+      padding-left: $nav-list-item-height;
+
+      &.active {
+        font-weight: 600;
+        text-decoration: none;
+      }
+
+      &:hover,
+      &.active {
+        background-color: darken($sidebar-color, 3%);
+      }
+    }
+
+    .nav-list-expander {
       position: absolute;
-      margin-top: 0.3em;
-      margin-left: -0.8em;
-      color: rgba($body-text-color, 0.3);
-      content: "- ";
+      width: $nav-list-item-height;
+      height: $nav-list-item-height;
+      padding-top: #{$nav-list-item-height / 4};
+      padding-right: #{$nav-list-item-height / 4};
+      padding-bottom: #{$nav-list-item-height / 4};
+      padding-left: #{$nav-list-item-height / 4};
+      fill: $link-color;
+
+      &:hover {
+        background-color: darken($sidebar-color, 3%);
+      }
+    }
+
+    > .nav-list {
+      display: none;
+      padding-left: $sp-3;
+      list-style: none;
+
+      .nav-list-item {
+        position: relative;
+
+        .nav-list-link {
+          color: $nav-child-link-color;
+        }
+      }
     }
 
     &.active {
-      &::before {
-        color: $body-text-color;
+      > .nav-list-expander svg {
+        transform: rotate(90deg);
+      }
+
+      > .nav-list {
+        display: block;
       }
     }
   }
 }
 
-.nav-list-item {
-  @include fs-4;
-  margin: 0;
-
-  @include mq(md) {
-    @include fs-3;
-  }
-
-  .nav-list-child-list {
-    display: none;
-  }
-
-  &.active {
-    .nav-list-child-list {
-      display: block;
-    }
-  }
-}
-
-.nav-list-link {
-  display: block;
-  padding-top: $sp-1;
-  padding-bottom: $sp-1;
-
-  &.active {
-    font-weight: 600;
-    color: $body-heading-color;
-    text-decoration: none;
-  }
-}
-
 // Small screen nav
 
 .site-nav {
diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss
index 127c0e2..f8e185c 100644
--- a/_sass/support/_variables.scss
+++ b/_sass/support/_variables.scss
@@ -112,6 +112,7 @@ $gutter-spacing: $sp-6 !default;
 $gutter-spacing-sm: $sp-4 !default;
 $nav-width: 264px !default;
 $nav-width-md: 248px !default;
+$nav-list-item-height: $sp-6 !default;
 $content-width: 800px !default;
 $header-height: 60px !default;
 $search-results-width: 500px !default;
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index 742b0d7..976dfe0 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -24,6 +24,13 @@ jtd.onReady = function(ready) {
 // Show/hide mobile menu
 
 function initNav() {
+  jtd.addEvent(document, 'click', function(e){
+    var expander = e.path.find(function(x){ return x.classList && x.classList.contains('nav-list-expander') });
+    if (expander) {
+      expander.parentElement.classList.toggle('active');
+    }
+  });
+
   const siteNav = document.getElementById('site-nav');
   const mainHeader = document.getElementById('main-header');
   const navTrigger = document.getElementById('site-nav-trigger');
