diff --git a/package-lock.json b/package-lock.json
index bf3f929f..369e0386 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,9 +8,6 @@
       "name": "cdlib-ui",
       "version": "3.6.0",
       "license": "MIT",
-      "dependencies": {
-        "@oddbird/css-anchor-positioning": "^0.9.0"
-      },
       "devDependencies": {
         "@faker-js/faker": "^10.4.0",
         "@fortawesome/fontawesome-pro": "^7.2.0",
@@ -437,31 +434,6 @@
         "npm": ">=10"
       }
     },
-    "node_modules/@floating-ui/core": {
-      "version": "1.7.5",
-      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.7.5.tgz",
-      "integrity": "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/utils": "^0.2.11"
-      }
-    },
-    "node_modules/@floating-ui/dom": {
-      "version": "1.7.6",
-      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.7.6.tgz",
-      "integrity": "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ==",
-      "license": "MIT",
-      "dependencies": {
-        "@floating-ui/core": "^1.7.5",
-        "@floating-ui/utils": "^0.2.11"
-      }
-    },
-    "node_modules/@floating-ui/utils": {
-      "version": "0.2.11",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.11.tgz",
-      "integrity": "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg==",
-      "license": "MIT"
-    },
     "node_modules/@fortawesome/fontawesome-pro": {
       "version": "7.2.0",
       "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-pro/-/fontawesome-pro-7.2.0.tgz",
@@ -887,36 +859,6 @@
         "node": ">= 8"
       }
     },
-    "node_modules/@oddbird/css-anchor-positioning": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/@oddbird/css-anchor-positioning/-/css-anchor-positioning-0.9.0.tgz",
-      "integrity": "sha512-G5nfb4sU0auxJH7VHafPwVJjr1GhH5uPSkmytGqhNftCpT3QEh8pFtMd4YHt1dRwb4o9qVZxlGSKUIc4TIrysQ==",
-      "license": "BSD-3-Clause",
-      "dependencies": {
-        "@floating-ui/dom": "^1.7.5",
-        "@types/css-tree": "^2.3.11",
-        "css-tree": "^3.1.0",
-        "nanoid": "^5.1.6"
-      }
-    },
-    "node_modules/@oddbird/css-anchor-positioning/node_modules/nanoid": {
-      "version": "5.1.7",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.7.tgz",
-      "integrity": "sha512-ua3NDgISf6jdwezAheMOk4mbE1LXjm1DfMUDMuJf4AqxLFK3ccGpgWizwa5YV7Yz9EpXwEaWoRXSb/BnV0t5dQ==",
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/ai"
-        }
-      ],
-      "license": "MIT",
-      "bin": {
-        "nanoid": "bin/nanoid.js"
-      },
-      "engines": {
-        "node": "^18 || >=20"
-      }
-    },
     "node_modules/@pa11y/html_codesniffer": {
       "version": "2.6.0",
       "resolved": "https://registry.npmjs.org/@pa11y/html_codesniffer/-/html_codesniffer-2.6.0.tgz",
@@ -3295,12 +3237,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/@types/css-tree": {
-      "version": "2.3.11",
-      "resolved": "https://registry.npmjs.org/@types/css-tree/-/css-tree-2.3.11.tgz",
-      "integrity": "sha512-aEokibJOI77uIlqoBOkVbaQGC9zII0A+JH1kcTNKW2CwyYWD8KM6qdo+4c77wD3wZOQfJuNWAr9M4hdk+YhDIg==",
-      "license": "MIT"
-    },
     "node_modules/@types/json5": {
       "version": "0.0.29",
       "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz",
@@ -5189,6 +5125,7 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/css-tree/-/css-tree-3.2.1.tgz",
       "integrity": "sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==",
+      "dev": true,
       "license": "MIT",
       "dependencies": {
         "mdn-data": "2.27.1",
@@ -10181,6 +10118,7 @@
       "version": "2.27.1",
       "resolved": "https://registry.npmjs.org/mdn-data/-/mdn-data-2.27.1.tgz",
       "integrity": "sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==",
+      "dev": true,
       "license": "CC0-1.0"
     },
     "node_modules/memorystream": {
@@ -13057,9 +12995,9 @@
       }
     },
     "node_modules/shell-quote": {
-      "version": "1.8.4",
-      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.4.tgz",
-      "integrity": "sha512-VsC6n6vz1ihYYyZZwX7YZSF5l5x36ca17OC+a69h94YqB7X6XLwf+5MOgynYir2SLFUbl8gIYvBo8K8RoNQ6bQ==",
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.10.0.tgz",
+      "integrity": "sha512-w1aiOKwKuRgtwAReIIj89puqg+I7GvX4IbLrvmhXbzQsj1+Zwi4VO3+fa6ZF91TWSjIxoEkKnMeHcLEODK5ZXA==",
       "dev": true,
       "license": "MIT",
       "engines": {
@@ -13407,6 +13345,7 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
       "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "dev": true,
       "license": "BSD-3-Clause",
       "engines": {
         "node": ">=0.10.0"
diff --git a/package.json b/package.json
index dfeb1fca..bef279fe 100644
--- a/package.json
+++ b/package.json
@@ -119,8 +119,5 @@
         }
       ]
     }
-  },
-  "dependencies": {
-    "@oddbird/css-anchor-positioning": "^0.9.0"
   }
 }
diff --git a/src/components/headernav.hbs b/src/components/headernav.hbs
index 2b49ebc8..927b0614 100644
--- a/src/components/headernav.hbs
+++ b/src/components/headernav.hbs
@@ -1,4 +1,5 @@
-<nav aria-label="global" class="c-headernav c-mobilenav js-headernav">
+{{!-- Read notes in component config --}}
+<nav aria-label="global" class="c-headernav c-headernav-no-js c-mobilenav">
   <ul>
     {{> menu-items headernav }}
   </ul>
diff --git a/src/css/components/footer.css b/src/css/components/footer.css
index 1885f5a0..752d7451 100644
--- a/src/css/components/footer.css
+++ b/src/css/components/footer.css
@@ -85,7 +85,7 @@
 .c-footer__legal {
   margin-block-end: var(--space2);
   padding-block: var(--space2);
-  border-block: 1px solid oklch(88% 0 0deg);
+  border-block: 1px solid blue;
 
   @media print {
     display: none;
diff --git a/src/css/components/headernav.css b/src/css/components/headernav.css
index 9d2ed79e..85e8b307 100644
--- a/src/css/components/headernav.css
+++ b/src/css/components/headernav.css
@@ -1,96 +1,118 @@
 /***** Header Nav Component *****/
 
+/* Read notes in component config */
+
 .c-headernav {
-  /* Remove all section lists if the Popover API isn't supported,
-  leaving only the top nav section links available to click.
-  The selector 'ul ul' is needed instead of '.c-headernav__popover'
-  because using the latter would result in a brief jump of the nav
-  before headernav.js loads and creates the '.c-headernav__section',
-  '.c-headernav__link' and '.c-headernav__popover selectors':
-  */
-
-  .no-popover & {
-    ul ul {
-      display: none;
+  --headernav-section-padding: var(--space3);
+  --headernav-item-margin: var(--space3);
+
+  position: relative;
+
+  ul {
+    all: unset;
+    list-style-type: none;
+
+    li {
+      margin: unset;
+      padding: unset;
     }
   }
 
-  ul {
-    margin: unset;
+  a {
+    display: block;
   }
 
-  /* Section columns (no columns by default).
-  These are set using 'columns-[#]' classes
-  defined in the top-level menu items within WP Menus:
-  */
+  /* Sections: */
+  > ul {
+    @media (--min-width2) {
+      display: flex;
 
-  .columns-2 .c-headernav__popover {
-    column-count: 2;
+      > li {
+        flex: 1 1 auto;
+      }
+    }
   }
 
-  .columns-3 .c-headernav__popover {
-    column-count: 3;
+  > ul > li {
+    @media (--min-width2) {
+      /* Nav bar main items: */
+      &:not(:last-child) {
+        border-inline-end: 1px solid oklch(55% 0 0deg);
+      }
+    }
   }
-}
 
-.c-headernav__popover {
-  position-anchor: --headernav-anchor;
-  top: anchor(bottom);
-  left: anchor(left);
-  margin: 0;
-  padding-block-end: var(--space3);
-  padding-inline: var(--space3);
-  column-gap: calc(var(--space3) * 2);
-  column-rule: 1px solid oklch(88% 0 0deg);
-  transition: opacity, display, overlay;
-  transition-duration: 0.3s;
-  transition-behavior: allow-discrete;
-  border: unset;
-  border-inline: 1px solid oklch(88% 0 0deg);
-  border-block-end: 1px solid oklch(88% 0 0deg);
-  opacity: 0;
-  background-color: oklch(95% 0 0deg);
-  box-shadow: 3px 3px 3px oklch(88% 0 0deg / 70%);
-
-  &:popover-open {
-    opacity: 1;
-
-    @starting-style {
-      opacity: 0;
+  /* Nav bar links: */
+  > ul > li > a {
+    @media (--min-width2) {
+      padding: var(--space1);
+      background: linear-gradient(oklch(95% 0 0deg), oklch(88% 0 0deg));
+      color: oklch(36% 0 0deg);
+      text-align: center;
+      text-decoration: none;
+
+      &:focus,
+      &:hover {
+        color: var(--color-blue);
+        text-decoration: underline;
+      }
     }
   }
 
-  /* Keep section lists together with their heading link: */
-
-  li {
-    break-inside: avoid;
+  /* Panels: */
+  > ul > li > ul {
+    display: none;
+    position: absolute;
+    padding: var(--headernav-section-padding);
+    column-gap: calc(var(--headernav-section-padding) * 2);
+    column-rule: 1px solid oklch(88% 0 0deg);
+    column-width: 9.5em;
+    border-inline: 1px solid oklch(88% 0 0deg);
+    border-block-end: 1px solid oklch(88% 0 0deg);
+    background-color: oklch(95% 0 0deg);
+    box-shadow: 3px 3px 3px oklch(88% 0 0deg / 70%);
   }
 
-  /* The first list items within each section: */
+  /* Panel columns (no columns, by default). These are set via 'columns-[#]' classes defined in the top-level menu items within WP Menus: */
 
-  > li {
-    display: grid;
-    width: 12rem;
+  > ul > .columns-2 > ul {
+    column-count: 2;
   }
 
-  /* Section lists after their heading link: */
-
-  > li > ul {
-    display: grid;
-    gap: 1rem;
+  > ul > .columns-3 > ul {
+    column-count: 3;
   }
 
-  /* Section heading links: */
+  /* Panel lists: */
+  > ul > li > ul > li {
+    break-inside: avoid; /* Firefox */
+  }
 
-  > li > a {
-    margin-block: var(--space3);
-    margin-inline-start: -0.3rem;
+  /* Panel list links: */
+  > ul > li > ul > li > a {
+    margin-block-end: var(--headernav-item-margin);
     color: var(--color-dark-red);
+    text-decoration: none;
+
+    &:focus,
+    &:hover {
+      text-decoration: underline;
+    }
   }
 
-  /* Link underline styles for all links: */
+  /* Panel sub-list 'heading' links: */
+  > ul > li > ul > li > a:only-child {
+    color: var(--color-blue);
+  }
 
-  a {
+  /* Panel sub-lists: */
+  > ul > li > ul > li > ul {
+    padding-inline: var(--space1);
+    break-inside: avoid; /* Firefox */
+  }
+
+   /* Panel sub-list links: */
+  > ul > li > ul > li > ul > li > a {
     text-decoration: none;
 
     &:focus,
@@ -99,42 +121,52 @@
     }
   }
 
-  /* Links without a following list: */
-
-  a:only-child {
-    color: var(--color-blue);
+  /* All panel list items: */
+  > ul > li li {
+    margin-block-end: var(--headernav-item-margin);
   }
-}
 
-@media (--min-width2) {
-  .c-headernav {
-    > ul {
-      display: flex;
+  /**** Panel Toggle ****/
+
+  /* If c-headernav JS not supported: */
+
+  &.c-headernav-no-js {
+    > ul > li:hover > ul {
+      @media (--min-width2) {
+        display: block;
+        z-index: 10;
+      }
     }
-  }
 
-  .c-headernav__section {
-    flex: 1 1 auto;
-    anchor-scope: all;
+    /* If :focus-within not supported. Only primary links accessible via tabkey: */
+
+    > ul > li a:focus {
+      @media (--min-width2) {
+        display: block;
+        z-index: 10;
+      }
+    }
+
+    /* If :focus-within supported. All links accessbile via focus. No toggle state on primary links, so user must tab through every secondary link in each section to reach the next section: */
 
-    &:not(:last-child) {
-      border-inline-end: 1px solid oklch(55% 0 0deg);
+    > ul > li:focus-within > ul {
+      @media (--min-width2) {
+        display: block;
+        z-index: 10;
+      }
     }
   }
 
-  .c-headernav__link {
-    display: block;
-    anchor-name: --headernav-anchor;
-    padding: var(--space1);
-    background: linear-gradient(oklch(95% 0 0deg), oklch(88% 0 0deg));
-    color: oklch(36% 0 0deg);
-    text-align: center;
-    text-decoration: none;
+  /* If c-headernav JS supported: */
 
-    &:focus,
-    &:hover {
-      color: var(--color-blue);
-      text-decoration: underline;
+  &.c-headernav-js {
+    /* Primary links disabled via JS and used as a toggle for each section. Hover and focus states handled by JS and set via 'open' class: */
+
+    li.open ul {
+      @media (--min-width2) {
+        display: block;
+        z-index: 10;
+      }
     }
   }
 }
diff --git a/src/css/components/mobilenav.css b/src/css/components/mobilenav.css
index ae6d945a..53e4ea47 100644
--- a/src/css/components/mobilenav.css
+++ b/src/css/components/mobilenav.css
@@ -42,10 +42,6 @@
           mask: url('data-url:npm:fa-light/angle-right.svg') center / 0.7rem no-repeat;
         }
       }
-
-      ul {
-        display: none;
-      }
     }
   }
 }
diff --git a/src/js/anchor-positioning.js b/src/js/anchor-positioning.js
deleted file mode 100644
index 562b1efd..00000000
--- a/src/js/anchor-positioning.js
+++ /dev/null
@@ -1,15 +0,0 @@
-// ***** Anchor Positioning Polyfill ***** //
-
-// Required for positioning elements that use the popover API.
-
-// https://github.com/oddbird/css-anchor-positioning
-
-const anchorPositioningPolyfill = async () => {
-  const { default: polyfill } = await import('@oddbird/css-anchor-positioning/dist/css-anchor-positioning-fn.js')
-
-  polyfill()
-}
-
-if (!('anchorScope' in document.documentElement.style)) {
-  anchorPositioningPolyfill()
-}
diff --git a/src/js/headernav.js b/src/js/headernav.js
index 6562895b..f456dd8d 100644
--- a/src/js/headernav.js
+++ b/src/js/headernav.js
@@ -1,52 +1,62 @@
-// Header Nav Component //
+// Headernav Component:
 
-import { popoverSupport } from './popover-support'
-const headerNav = document.querySelector('.js-headernav')
 const headerNavMediaQuery = window.matchMedia('(min-width: 760px)')
 
-if (headerNav && popoverSupport()) {
-  const subNavs = headerNav.querySelectorAll(':scope > ul > li:has(> ul)')
-  for (const subNav of subNavs) {
-    const subNavLink = subNav.querySelector('a')
-    const subNavPopover = subNav.querySelector('ul')
-    subNav.classList.add('c-headernav__section')
-    subNavLink.classList.add('c-headernav__link')
-    subNavPopover.classList.add('c-headernav__popover')
-    subNavPopover.popover = 'auto'
-    subNavLink.setAttribute('role', 'button')
-
-    const headerNavToggles = mq => {
-      // Only a <button> as a popover invoker has built-in accessiblity bindings, so set and toggle the link's aria expanded state:
-      const expandedState = () => {
-        if (subNavPopover.matches(':popover-open')) {
-          subNavLink.setAttribute('aria-expanded', 'true')
-        } else {
-          subNavLink.setAttribute('aria-expanded', 'false')
-        }
-      }
-
-      if (mq.matches) {
-        // Initial state:
-        expandedState()
-
-        // Toggle subnav if link clicked:
-        subNavLink.addEventListener('click', (e) => {
-          subNavPopover.togglePopover()
-          expandedState()
-          e.preventDefault() // disable link from going to its URL when clicked
-        })
-
-        // Hide previously opened subnav when keyboard focus leaves it:
-        subNav.addEventListener('focusout', (e) => {
-          if (!e.currentTarget.contains(e.relatedTarget)) {
-            subNavPopover.hidePopover()
-            expandedState()
-          }
-        })
-      }
-    }
-
-    headerNavMediaQuery.addEventListener('change', headerNavToggles)
-    headerNavToggles(headerNavMediaQuery)
+function clickLink (event) {
+  if (this.parentElement.classList.contains('open') === false) {
+    this.parentElement.classList.add('open')
+    this.setAttribute('aria-expanded', 'true')
+  } else {
+    this.parentElement.classList.remove('open')
+    this.setAttribute('aria-expanded', 'false')
   }
+  event.preventDefault()
 }
+
+const headerNavToggles = e => {
+  if (document.querySelector('.c-headernav') && e.matches) {
+    const allMenuItems = document.querySelectorAll('.c-headernav > ul > li');
+
+    [].forEach.call(allMenuItems, function (el) {
+      document.querySelector('.c-headernav').classList.remove('c-headernav-no-js')
+      document.querySelector('.c-headernav').classList.add('c-headernav-js')
+      el.querySelector('a').setAttribute('aria-haspopup', 'true')
+      el.querySelector('a').setAttribute('aria-expanded', 'false')
+
+      el.addEventListener('mouseover', function (event) {
+        this.classList.add('open')
+        this.querySelector('a').setAttribute('aria-expanded', 'true')
+      })
+
+      el.addEventListener('mouseout', function (event) {
+        this.classList.remove('open')
+        this.querySelector('a').setAttribute('aria-expanded', 'false')
+      })
+
+      el.querySelector('a').addEventListener('click', clickLink)
+    });
+
+    [].forEach.call(allMenuItems, function (el) {
+      el.querySelector('a').addEventListener('focus', function (event) {
+        [].forEach.call(
+          allMenuItems,
+          function (el) {
+            if (el !== this.parentElement) {
+              el.classList.remove('open')
+              el.querySelector('a').setAttribute('aria-expanded', 'false')
+            }
+          }, this
+        )
+      })
+    })
+  } else {
+    const allMenuItems = document.querySelectorAll('.c-headernav > ul > li');
+
+    [].forEach.call(allMenuItems, function (el) {
+      el.querySelector('a').removeEventListener('click', clickLink)
+    })
+  }
+}
+
+headerNavMediaQuery.addEventListener('change', headerNavToggles)
+headerNavToggles(headerNavMediaQuery)
diff --git a/src/js/main.js b/src/js/main.js
index 842d4e2f..8da05c8e 100644
--- a/src/js/main.js
+++ b/src/js/main.js
@@ -1,8 +1,6 @@
-import './anchor-positioning.js'
 import './headernav.js'
 import './mediaqueries.js'
 import './newsreel.js'
-import './popover-support.js'
 import './sidebarposts.js'
 import './slideshow.js'
 import './toggles.js'
diff --git a/src/js/popover-support.js b/src/js/popover-support.js
deleted file mode 100644
index 3330d053..00000000
--- a/src/js/popover-support.js
+++ /dev/null
@@ -1,13 +0,0 @@
-// ***** Popover Support for CSS ***** //
-
-// If the popover element is detected in the browser, remove the no-popover class from the html tag.
-
-const popoverSupport = () => {
-  return Object.hasOwn(window.HTMLElement.prototype, 'popover')
-}
-
-if (popoverSupport()) {
-  document.documentElement.classList.remove('no-popover')
-}
-
-export { popoverSupport }
diff --git a/tool/layouts/base.hbs b/tool/layouts/base.hbs
index 38da403c..e59f02b8 100644
--- a/tool/layouts/base.hbs
+++ b/tool/layouts/base.hbs
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="no-popover">
+<html lang="en">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">