diff --git a/emcclib.js b/emcclib.js
index 8da9dba..036caf3 100644
--- a/emcclib.js
+++ b/emcclib.js
@@ -70,18 +70,19 @@ mergeInto(LibraryManager.library, {
     js_add_preset: function(menuid, ptr, value) {
         var name = UTF8ToString(ptr);
         var item = document.createElement("li");
-        item.setAttribute("data-index", value);
-        var tick = document.createElement("span");
+        var label = document.createElement("label");
+        var tick = document.createElement("input");
+        tick.type = "radio";
         tick.className = "tick";
-        tick.appendChild(document.createTextNode("\u2713"));
-        item.appendChild(tick);
-        item.appendChild(document.createTextNode(name));
+        tick.name = "preset";
+        tick.value = value;
+        label.appendChild(tick);
+        label.appendChild(document.createTextNode(name));
+        item.appendChild(label);
         gametypesubmenus[menuid].appendChild(item);
-        gametypeitems.push(item);
 
-        item.onclick = function(event) {
+        tick.onclick = function(event) {
             if (dlg_dimmer === null) {
-                gametypeselectedindex = value;
                 command(2);
             }
         }
@@ -100,13 +101,14 @@ mergeInto(LibraryManager.library, {
         // We still create a transparent tick element, even though it
         // won't ever be selected, to make submenu titles line up
         // nicely with their neighbours.
+        var label = document.createElement("div");
         var tick = document.createElement("span");
-        tick.appendChild(document.createTextNode("\u2713"));
         tick.className = "tick";
-        item.appendChild(tick);
-        item.appendChild(document.createTextNode(name));
+        label.appendChild(tick);
+        label.appendChild(document.createTextNode(name));
+        item.appendChild(label);
         var submenu = document.createElement("ul");
-        item.appendChild(submenu);
+        label.appendChild(submenu);
         gametypesubmenus[menuid].appendChild(item);
         var toret = gametypesubmenus.length;
         gametypesubmenus.push(submenu);
@@ -120,7 +122,7 @@ mergeInto(LibraryManager.library, {
      * dropdown.
      */
     js_get_selected_preset: function() {
-        return gametypeselectedindex;
+        return menuform.elements["preset"].value;
     },
 
     /*
@@ -131,16 +133,7 @@ mergeInto(LibraryManager.library, {
      * which turn out to exactly match a preset).
      */
     js_select_preset: function(n) {
-        gametypeselectedindex = n;
-        for (var i in gametypeitems) {
-            var item = gametypeitems[i];
-            var tick = item.firstChild;
-            if (item.getAttribute("data-index") == n) {
-                tick.classList.add("selected");
-            } else {
-                tick.classList.remove("selected");
-            }
-        }
+        menuform.elements["preset"].value = n;
     },
 
     /*
diff --git a/emccpre.js b/emccpre.js
index 77bdbb1..93d2e45 100644
--- a/emccpre.js
+++ b/emccpre.js
@@ -126,15 +126,17 @@ var dlg_return_funcs = null;
 var dlg_return_sval, dlg_return_ival;
 
 // The <ul> object implementing the game-type drop-down, and a list of
-// the <li> objects inside it. Used by js_add_preset(),
-// js_get_selected_preset() and js_select_preset().
-var gametypelist = null, gametypeitems = [];
-var gametypeselectedindex = null;
+// the sub-lists inside it. Used by js_add_preset().
+var gametypelist = null;
 var gametypesubmenus = [];
 
 // C entry point for miscellaneous events.
 var command;
 
+// The <form> encapsulating the menus.  Used by
+// js_get_selected_preset() and js_select_preset().
+var menuform = null;
+
 // The two anchors used to give permalinks to the current puzzle. Used
 // by js_update_permalinks().
 var permalink_seed, permalink_desc;
@@ -187,10 +189,7 @@ function canvas_mouse_coords(event, element) {
 
 // Enable and disable items in the CSS menus.
 function disable_menu_item(item, disabledFlag) {
-    if (disabledFlag)
-        item.className = "disabled";
-    else
-        item.className = "";
+    item.disabled = disabledFlag;
 }
 
 // Dialog-box functions called from both C and JS.
@@ -420,6 +419,7 @@ function initPuzzle() {
 
     gametypelist = document.getElementById("gametype");
     gametypesubmenus.push(gametypelist);
+    menuform = document.getElementById("gamemenu");
 
     // In IE, the canvas doesn't automatically gain focus on a mouse
     // click, so make sure it does
diff --git a/html/jspage.pl b/html/jspage.pl
index 7e7a075..9130d27 100755
--- a/html/jspage.pl
+++ b/html/jspage.pl
@@ -94,37 +94,43 @@ EOF
 #gamemenu ul li {
     /* Add a little mild text formatting */
     font-weight: bold; font-size: 0.8em;
-    /* Line height and padding appropriate to top-level menu items */
-    padding-left: 0.75em; padding-right: 0.75em;
-    padding-top: 0.2em; padding-bottom: 0.2em;
-    margin: 0;
     /* Suppress the text-selection I-beam pointer */
     cursor: default;
     /* Surround each menu item with a border. */
     border: 1px solid rgb(180,180,180);
     /* Arrange that the borders of each item overlap the ones next to it. */
     margin: -0.5px;
-}
-
-#gamemenu ul li.disabled {
-    /* Grey out menu items with the "disabled" class */
-    color: rgba(0,0,0,0.5);
-}
-
-#gamemenu ul li.separator {
-    color: transparent;
-    border: 0;
-}
-
-#gamemenu ul li:hover {
-    /* When the mouse is over a menu item, highlight it */
-    background: rgba(0,0,0,0.3);
     /* Set position:relative, so that if this item has a submenu it can
      * position itself relative to the parent item. */
     position: relative;
 }
 
-#gamemenu ul li.disabled:hover {
+#gamemenu ul li.separator {
+    width: 1.5em;
+    color: transparent;
+    border: 0;
+}
+
+/* The interactive contents of menu items are their child elements. */
+#gamemenu ul li > * {
+    /* Line height and padding appropriate to top-level menu items */
+    padding-left: 0.75em; padding-right: 0.75em;
+    padding-top: 0.2em; padding-bottom: 0.2em;
+    margin: 0;
+    display: block;
+}
+
+#gamemenu ul :disabled {
+    /* Grey out disabled buttons */
+    color: rgba(0,0,0,0.5);
+}
+
+#gamemenu ul li > :hover {
+    /* When the mouse is over a menu item, highlight it */
+    background: rgba(0,0,0,0.3);
+}
+
+#gamemenu ul li > :disabled:hover {
     /* Disabled menu items don't get a highlight on mouse hover */
     background: inherit;
 }
@@ -183,7 +189,7 @@ EOF
     left: inherit; right: 100%;
 }
 
-#gamemenu ul li:hover > ul {
+#gamemenu ul li:hover > * > ul {
     /* Last but by no means least, the all-important line that makes
      * submenus be displayed! Any <ul> whose parent <li> is being
      * hovered over gets display:flex overriding the display:none
@@ -191,13 +197,35 @@ EOF
     display: flex;
 }
 
+#gamemenu button {
+    /* Menu items that trigger an action.  We put some effort into
+     * removing the default button styling. */
+    appearance: none;
+    font: inherit;
+    padding: initial;
+    color: inherit;
+    background: initial;
+    border: initial;
+    text-align: inherit;
+    width: 100%;
+}
+
 #gamemenu .tick {
-    /* The tick next to a menu item, or its unselected equivalent. */
+    /* The tick at the start of a menu item, or its unselected equivalent.
+     * This is represented by an <input type="radio">, so we put some
+     * effort into overriding the default style. */
+    appearance: none;
+    margin: initial;
+    font: inherit;
     padding-right: 0.5em;
     color: transparent;
 }
 
-#gamemenu .tick.selected {
+#gamemenu .tick::before {
+    content: "\\2713";
+}
+
+#gamemenu .tick:checked {
     /* Tick for a selected menu entry. */
     color: inherit;
 }
@@ -284,20 +312,20 @@ ${unfinishedpara}
 
 <hr>
 <div id="puzzle" style="display: none">
-<div id="gamemenu"><ul><li>Game...<ul
-><li id="specific">Enter game ID</li
-><li id="random">Enter random seed</li
-><li id="save">Download save file</li
-><li id="load">Upload save file</li
-></ul></li
-><li>Type...<ul id="gametype"></ul></li
+<form id="gamemenu"><ul><li><div>Game...<ul
+><li><button type="button" id="specific">Enter game ID</button></li
+><li><button type="button" id="random">Enter random seed</button></li
+><li><button type="button" id="save">Download save file</button></li
+><li><button type="button" id="load">Upload save file</button></li
+></ul></div></li
+><li><div>Type...<ul id="gametype"></ul></div></li
 ><li class="separator"></li
-><li id="new" class="afterseparator">New<span class="verbiage"> game</span></li
-><li id="restart">Restart<span class="verbiage"> game</span></li
-><li id="undo">Undo<span class="verbiage"> move</span></li
-><li id="redo">Redo<span class="verbiage"> move</span></li
-><li id="solve">Solve<span class="verbiage"> game</span></li
-></ul></div>
+><li class="afterseparator"><button type="button" id="new">New<span class="verbiage"> game</span></button></li
+><li><button type="button" id="restart">Restart<span class="verbiage"> game</span></button></li
+><li><button type="button" id="undo">Undo<span class="verbiage"> move</span></button></li
+><li><button type="button" id="redo">Redo<span class="verbiage"> move</span></button></li
+><li><button type="button" id="solve">Solve<span class="verbiage"> game</span></button></li
+></ul></form>
 <div align=center>
   <div id="resizable">
   <canvas id="puzzlecanvas" width="1px" height="1px" tabindex="1">