Top nav: desktop interactions

styles/_external-links.scss

@@ -1,4 +1,4 @@
-.external-link{
+.external-link {
   &::after {
     content: "\00a0";
     background-image: url(../img/icons/arrow-up-right.svg);
@@ -24,6 +24,15 @@
   }
 }
 
+.top-nav .dropdown .external-link {
+  &::after {
+    background-position: left 0 bottom -.1em;
+  }
+
+  &:hover::after {
+    background-position: left .2em bottom .1em;
+  }
+}
 
 // /* Reduce external link icon size */
 // .fa.fa-external-link:before {

styles/_lang-selector.scss

@@ -1,12 +0,0 @@
-/* Language selector (the one in the footer) -------------------------------- */
-
-.language-selector {
-  .nav-link {
-    font-size: 16px;
-  }
-
-  .nav-link.active {
-    color: $black;
-    font-weight: bold;
-  }
-}

styles/_top-nav.scss

@@ -96,6 +96,15 @@
         margin: 0;
         white-space: normal;
       }
+
+      &:hover {
+        h4 {
+          color: $blue-purple-400;
+        }
+        p {
+          font-weight: 400;
+        }
+      }
     }
   }
   // Desktop version
@@ -106,12 +115,23 @@
       &::after {
         display: none;
       }
-      span {
+      > span {
         border-bottom: 2px solid transparent;
       }
+
+      // Disabled: non-animated caret style
+      // &.with-caret::after {
+      //   display: inline;
+      //   content:"\f107";
+      //   font-family: FontAwesome;
+      //   margin-left: 0.5rem;
+      //   border-width: 0 0 0 0;
+      //   color: $blue-purple-400;
+      //   vertical-align: bottom;
+      // }
     }
 
-    .dropdown:hover .dropdown-toggle span {
+    .dropdown .dropdown-toggle:hover > span:not(.chevron) {
       padding-bottom: 8px;
       border-bottom: 2px solid $blue-purple-400;
       margin-bottom: -8px;
@@ -123,9 +143,16 @@
 
       &.show {
         display: grid;
-        grid-template-columns: repeat(3, 180px);
         gap: 40px;
-        left: -200px;
+
+        &#topnav_dd_xrp-ledger-overviewhtml {
+          grid-template-columns: 180px 180px 180px;
+        }
+
+        &#topnav_dd_docshtml {
+          grid-template-columns: 180px 180px 260px;
+          left: -200px;
+        }
 
         &#topnav_dd_contributehtml {
           grid-template-columns: 200px;
@@ -204,6 +231,16 @@
           padding-bottom: 0;
         }
       }
+
+      h5:hover {
+        background-color: inherit;
+      }
+
+      a:hover {
+        color: $blue-purple-400;
+        font-weight: 700; // TODO: confirm weight for semibold
+        background-color: inherit;
+      }
     }
 
     #navbar-search {
@@ -349,3 +386,50 @@
   height: 80px;
   visibility: hidden;
 }
+
+// Animated chevron (e.g. for language dropdown) -------------------------------
+
+.chevron {
+  position: relative;
+  display: inline-block;
+  width: .75rem;
+  height: .5625rem;
+
+  span {
+    position: absolute;
+    top: .25rem;
+    display: inline-block;
+    width: .5rem;
+    height: .15rem;
+    background-color: $blue-purple-400;
+    transition: all .2s ease;
+    border: none;
+
+    &:first-of-type {
+      left: 0;
+      transform: rotate(45deg);
+    }
+    &:last-of-type {
+      right: 0;
+      transform: rotate(-45deg);
+    }
+  }
+
+  &.active {
+    span:first-of-type {
+      transform: rotate(-45deg);
+    }
+    span:first-of-type {
+      transform: rotate(45deg);
+    }
+  }
+}
+
+.dropdown.show .chevron {
+  span:first-of-type {
+    transform: rotate(-45deg);
+  }
+  span:last-of-type {
+    transform: rotate(45deg);
+  }
+}

styles/xrpl.scss

@@ -50,7 +50,6 @@ $font-family-sans-serif: -apple-system, system-ui, 'Roboto', sans-serif;
 @import "_landings.scss";
 @import "_interactive-tutorials.scss";
 @import "_status-labels.scss";
-@import "_lang-selector.scss";
 @import "_dev-tools.scss";
 @import "_print.scss";
 @import "_pages.scss";

template/component-top-nav.html.jinja

@@ -77,6 +77,7 @@
       <div class="dropdown">
         <a class="nav-link dropdown-toggle with-caret" id="language_selector_header_btn" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
           {{(config.languages|selectattr('code', 'eq', target.lang)|first).display_name}}
+          <span class="chevron"><span></span><span></span></span>
         </a>
         <div class="dropdown-menu smaller-dropdown" aria-labelledby="language_selector_header_btn">
           {% for lang in config.languages %}