Use css class for headers in toc

content/index.css

@@ -68,11 +68,11 @@ body._toc-right { padding-right: 300px !important; }
   overflow-y: auto;
   overflow-x: hidden;
 }
-#_toc #_ul {
+#_toc ._ul {
   padding: 0 0 0 20px !important;
   margin: 0 !important;
 }
-#_toc #_ul a {
+#_toc ._ul a {
   font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
   font-size: 14px !important;
   line-height: 17px !important;
@@ -87,7 +87,7 @@ body._toc-right { padding-right: 300px !important; }
   padding: 10px 15px !important;
   display: block !important;
 }
-#_toc #_ul a:hover {
+#_toc ._ul a:hover {
   text-decoration: underline !important;
 }
 

content/index.js

@@ -180,11 +180,11 @@ var toc = (
     title: node.innerText
   }))
   .reduce((html, header) => {
-    html += '<div id="_ul">'.repeat(header.level)
+    html += '<div class="_ul">'.repeat(header.level)
     html += link(header)
     html += '</div>'.repeat(header.level)
     return html
-  }, '<div id="_toc"><div id="_ul">') + '</div></div>'
+  }, '<div id="_toc">') + '</div>'
 
 if (document.readyState === 'complete') {
   mount()

test/popup-options.js

@@ -387,7 +387,7 @@ module.exports = ({popup, advanced, content}) => {
 
       t.deepStrictEqual(
         await content.evaluate(() =>
-          Array.from(document.querySelectorAll('#_toc #_ul a'))
+          Array.from(document.querySelectorAll('#_toc ._ul a'))
             .map((a) => ({href: a.getAttribute('href'), text: a.innerText}))
         ),
         [