diff --git a/css/index.css b/css/index.css
index cfcc73e..12009e1 100644
--- a/css/index.css
+++ b/css/index.css
@@ -224,6 +224,18 @@ summary {
 	margin: 5px 0;
 }
 
+/* Handle buttons with sub-buttons in CSS instead of JS. */
+details > summary {
+	list-style: none;
+	margin: 0;
+}
+details > summary::before {
+	content: "▼";
+}
+details[open] > summary::before {
+	content: "▲";
+}
+
 /* Define strong as bold, and em as italics */
 /* Note: in some particular places, strong has been redefined as font-weight: 600; */
 /* This gives a better effect for those areas, and will default to bold for fonts which do not support numerical font-weight */
diff --git a/index.template.php b/index.template.php
index b60d43f..a4d9950 100644
--- a/index.template.php
+++ b/index.template.php
@@ -670,39 +670,52 @@ function template_button_strip_single_button($key, $value, $buttons) {
 	// As of 2.1, the 'test' for each button happens while the array is being generated. The extra 'test' check here is deprecated but kept for backward compatibility (update your mods, folks!)
 	if (!isset($value['test']) || !empty($context[$value['test']]))
 	{
+		// Buttons used to spawn another list of options are handled in a dedicated function.
+		if (!empty($value['sub_buttons']))
+			return template_button_strip_single_button_with_sub_buttons($key, $value, $buttons);
+
 		if (!isset($value['id']))
 			$value['id'] = $key;
 
 		$button = '
 			<a class="button button_strip_' . $key . (isset($value['class']) ? ' ' . $value['class'] : '') . '" ' . (!empty($value['url']) ? 'href="' . $value['url'] . '"' : '') . ' ' . (isset($value['custom']) ? ' ' . $value['custom'] : '') . '>'.(!empty($value['icon']) ? '<span class="main_icons '.$value['icon'].'"></span>' : '').'' . $txt[$value['text']] . '</a>';
 
-		if (!empty($value['sub_buttons']))
-		{
-			$button .= '
-				<div class="top_menu dropmenu ' . $key . '_dropdown">
-					<div class="viewport">
-						<div class="overview">';
-			foreach ($value['sub_buttons'] as $element)
-			{
-				if (isset($element['test']) && empty($context[$element['test']]))
-					continue;
-
-				$button .= '
-							<a href="' . $element['url'] . '"><strong>' . $txt[$element['text']] . '</strong>';
-				if (isset($txt[$element['text'] . '_desc']))
-					$button .= '<br><span>' . $txt[$element['text'] . '_desc'] . '</span>';
-				$button .= '</a>';
-			}
-			$button .= '
-						</div><!-- .overview -->
-					</div><!-- .viewport -->
-				</div><!-- .top_menu -->';
-		}
-
 		$buttons[] = $button;
 	}
 	return $buttons;
 }
+function template_button_strip_single_button_with_sub_buttons($key, $value, $buttons) {
+	global $context, $txt;
+
+	if (!isset($value['id']))
+		$value['id'] = $key;
+
+	$button = '
+		<details>
+			<summary>
+				<a class="button button_strip_' . $key . (isset($value['class']) ? ' ' . $value['class'] : '') . '" ' . (!empty($value['url']) ? 'href="' . $value['url'] . '"' : '') . ' ' . (isset($value['custom']) ? ' ' . $value['custom'] : '') . '>'.(!empty($value['icon']) ? '<span class="main_icons '.$value['icon'].'"></span>' : '').'' . $txt[$value['text']] . '</a>
+			</summary>';
+
+	$button .= '
+			<ul>';
+	foreach ($value['sub_buttons'] as $element)
+	{
+		if (isset($element['test']) && empty($context[$element['test']]))
+			continue;
+
+		$button .= '
+						<li><a href="' . $element['url'] . '"><strong>' . $txt[$element['text']] . '</strong>';
+		if (isset($txt[$element['text'] . '_desc']))
+			$button .= '<br><span>' . $txt[$element['text'] . '_desc'] . '</span>';
+		$button .= '</a></li>';
+	}
+	$button .= '
+			</ul>
+		</details>';
+
+	$buttons[] = $button;
+	return $buttons;
+}
 
 /**
  * Generate a list of quickbuttons.