diff --git a/less/pad.less b/less/pad.less
index d3e4350..91c002d 100644
--- a/less/pad.less
+++ b/less/pad.less
@@ -1,509 +1,509 @@
 .dropdown-nav {
 	font-family: @sansFont;
 	line-height: 2em;
 	span {
 		margin: 0;
 	}
 	.material-icons {
 		vertical-align: sub;
 	}
 	>ul>li {
 		line-height: 1.8;
 		bottom: -0.35em;
 	}
 	ul {
 		display: inline;
 		list-style:none;
 		position:relative;
 		margin:0;
 		padding:0;
 
 		ul {
 			display:none;
 			position:absolute;
 			top:100%;
 			left:0;
 			background:#fff;
 			padding:0;
 			max-height: 30em;
 			overflow-y: auto;
 			overflow-x: hidden;
 			border: 1px solid @lightNavBorder;
 			.rounded(.25em);
 			li {
 				line-height: 1.8;
 				display: block;
 				min-width: 9em;
 				max-width: 16em;
 			}
 		}
 		a {
 			display: block;
 			color:#333;
 			text-decoration:none;
 			padding: 0 0.5em;
 			margin: 0;
 			overflow: hidden;
 			white-space: -moz-nowrap;  /* Mozilla, since 1999 */
 			white-space: -nowrap;      /* Opera 4-6 */
 			white-space: -o-nowrap;    /* Opera 7 */
 			white-space: nowrap;
 			&:hover {
 				text-decoration: none;
 			}
 		}
 		li {
 			display: inline-block;
 			position: relative;
 			margin: 0;
 			padding: 0;
 			&:hover {
 				background: @lightNavHoverBG;
 			}
-			&:hover > ul {
+			&:hover > ul, &.open > ul {
 				display: block;
 			}
 			&.selected {
 				a, a:hover {
 					color: #888;
 				}
 			}
 			&.current-user, &.menu-heading {
 				font-weight: bold;
 				padding: 0 .5em;
 				color: #000;
 				&:hover {
 					background-color: transparent !important;
 				}
 			}
 			&.menu-heading {
 				color: #666;
 				font-weight: normal;
 				font-size: 0.8em;
 				padding: 0.2em 0.8em;
 				cursor: default;
 				text-align: left;
 			}
 			hr {
 				margin: 0.5em 0.75em;
 			}
 		}
 	}
 }
 nav#manage {
 	.dropdown-nav;
 	ul ul li {
 		min-width: 11em;
 		img.ic-18dp {
 			margin-top: -2px;
 		}
 	}
 }
 
 img.ic-18dp {
 	width: 18px;
 	height: 18px;
 	vertical-align: middle;
 }
 
 img.ic-24dp {
 	width: 24px;
 	height: 24px;
 	vertical-align: middle;
 }
 
 body#pad, body#pad-sub {
 	margin: 0;
 	padding: 0;
 	font-size: 100%;
 	font-family: Lora, serif;
 
 	header {
 		height: 1.6em;
 	}
 
 	#tools {
 		margin: 0 0 1em;
 		padding: 1em 2em;
 		-moz-transition-property: opacity;
 		-webkit-transition-property: opacity;
 		-o-transition-property: opacity;
 		transition-property: opacity;
 		.transition-duration(0.4s);
 
 		&:hover {
 			.opacity(1);
 
 			.hidden {
 				.opacity(1);
 			}
 		}
 
 		.hidden {
 			&#wc {
 				position: relative;
 				top: -0.15em;
 				font-size: 0.9em;
 				margin-left: 0.75em;
 			}
 		}
 		
 		h1 {
 			display: inline-block;
 			font-family: Lora, serif;
 			margin: 0;
 			font-size: 1.5em;
 
 			a {
 				color: white;
 			}
 		}
 
 		nav {
 			.dropdown-nav;
 		}
 
 		#clip {
 			display: inline-block;
 			margin-top: -0.35em;
 		}
 
 		#belt {
 			float: right;
 
 			a {
 				padding: 1em 1.2em;
 				vertical-align: middle;
 				.opacity(.75);
 				.transition-duration(0.2s);
 				-moz-transition-property: opacity;
 				-webkit-transition-property: opacity;
 				-o-transition-property: opacity;
 				transition-property: opacity;
 
 				&:hover {
 					.opacity(1);
 				}
 
 				&.disabled, &.disabled:hover {
 					.opacity(.3);
 				}
 
 				img.ic-24dp {
 					vertical-align: bottom;
 				}
 
 				.material-icons {
 					vertical-align: middle;
 					max-width: 24px;
 					overflow: hidden;
 					display: inline-block;
 				}
 
 				.material-icons, img.ic-24dp {
 					&+ span {
 						margin-left: .4em;
 						height: 24px;
 						vertical-align: bottom;
 					}
 				}
 			}
 			.tool:last-child a {
 				padding-right: 0;
 			}
 		}
 
 		.tool {
 			display: inline-block;
 			margin: 0;
 
 			&#status {
 				&.doing {
 					font-style: italic;
 				}
 			}
 			button {
 				font-family: @sansFont;
 				background-color: transparent;
 				padding-top: 0.25rem;
 				padding-bottom: 0.25rem;
 				border: 0;
 			}
 		}
 	}
 }
 
 body#pad-sub {
 	.content-container {
 		p {
 			a:hover {
 				text-decoration: underline;
 			}
 			&.status {
 				text-align: center;
 				font-size: 1.1em;
 				&:first-child {
 					margin-top: 1.5em;
 				}
 			}
 		}
 	}
 }
 
 body#pad {
 	textarea,
 	textarea:focus {
 		border: 0;
 		outline: 0;
 	}
 	textarea {
 		position: fixed !important;
 		top: 3em;
 		right: 0;
 		bottom: 0;
 		left: 0;
 		width: 100%;
 		height: auto;
 		height: calc(~"100% - 3em - 1px");
 		padding: 1em 2em 2em;
 		font-size: 1.2em;
 		letter-spacing: 0.6px;
 		box-sizing: border-box;
 		resize: none;
 
 		&.classy {
 			font-family: Lora, serif;
 			letter-spacing: 0.7px;
 		}
 		&.mono, &.code {
 			padding-left: 1em;
 			padding-right: 1em;
 			white-space: -moz-pre;  /* Mozilla, since 1999 */
 			white-space: -pre;      /* Opera 4-6 */
 			white-space: -o-pre;    /* Opera 7 */
 			white-space: pre;
 			word-wrap: normal;
 		}
 		&.norm, &.sans, &.wrap {
 			line-height: 1.4;
 		}
 	}
 
 	#tools {
 		position: fixed;
 		top: 0;
 		left: 0;
 		right: 0;
 		margin: 0;
 		.opacity(.2);
 
 		.mode-wp {
 			font-family: serif;
 		}
 		.mode-typewriter {
 			font-family: "Courier New", monospace;
 			font-size: 1em;
 		}
 	}
 }
 
 .modal {
 	display: none;
 	position: absolute;
 	z-index: 11;
     top: 3em;
     left: 50%;
     width: 30em;
     margin-left: -15em;
     padding: 1.5em 2em;
 	.rounded(.25em);
     background: @lightNavBG;
 	border: 1px solid @lightNavBorder;
 
 	h2 {
 		margin-top: 0;
 	}
 
 	input[type=text], input[type=email], input[type=password] {
 		background: transparent;
 		border: 0;
 		border-bottom: 1px solid #ccc;
 		-moz-transition-property: opacity;
 		-webkit-transition-property: opacity;
 		-o-transition-property: opacity;
 		transition-property: opacity;
 		.transition-duration(0.2s);
 		.opacity(1);
 
 		&:disabled {
 			.opacity(.4);
 		}
 	}
 
 	.short {
 		text-align: center;
 	}
 
 	.form-hint {
 		font-size: 0.78em;
 		color: #888;
 	}
 }
 
 #overlay {
 	display: none;
     position: fixed;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background: rgba(0, 0, 0, 0.4);
     z-index: 10;
 }
 
 body#pad .alert {
 	position: fixed;
 	bottom: 0.25em;
 	left: 2em;
 	right: 2em;
 	font-size: 1.1em;
 
 	&#edited-elsewhere {
 		&.hidden {
 			display: none;
 		}
 
 		a {
 			font-weight: bold;
 		}
 	}
 }
 
 @media all and (max-height: 500px) {
 	body#pad {
 		textarea {
 			top: 2.25em;
 			padding-top: 0.25em;
 		}
 		#tools {
 			padding-top: 0.5em;
 			padding-bottom: 0.5em;
 		}
 	}
 }
 
 @media all and (min-width: 360px) {
 	body#pad #tools .if-room.room-1, body#pad-sub #tools .tool.if-room.room-1, .if-room.room-1 {
 		display: inline-block;
 	}
 }
 
 @media all and (min-width: 425px) {
 	body#pad #tools .if-room.room-2, body#pad-sub #tools .tool.if-room.room-2, .if-room.room-2 {
 		display: inline-block;
 	}
 }
 
 @media all and (min-width: 510px) {
 	body#pad #tools .if-room.room-3, body#pad-sub #tools .tool.if-room.room-3, .if-room.room-3 {
 		display: inline-block;
 	}
 }
 
 @media all and (max-width: 650px) {
 	body#pad #tools .tool.if-room, body#pad-sub #tools .tool.if-room, .if-room {
 		display: none;
 	}
 }
 
 @media all and (max-width: 600px) {
 	.modal {
 		margin-left: 0;
 		width: auto;
 		left: 0;
 		right: 0;
 	}
 	#user-nav .tabs {
 		display: block;
 		text-align: center;
 		margin: 0.5em 0 -2em;
 		a:first-child {
 			margin-left: 0;
 		}
 	}
 	#target-name {
 		max-width: 98px;
 		display: inline-block;
 	}
 }
 
 @media all and (min-width: 50em) {
 	body#pad {
 		textarea {
 			padding-left: 10%;
 			padding-right: 10%;
 		}
 		.alert {
 			left: 10%;
 			right: 10%;
 		}
 	}
 }
 @media all and (min-width: 60em) {
 	body#pad {
 		textarea {
 			padding-left: 15%;
 			padding-right: 15%;
 		}
 		.alert {
 			left: 15%;
 			right: 15%;
 		}
 	}
 }
 @media all and (min-width: 70em) {
 	body#pad {
 		textarea {
 			padding-left: 20%;
 			padding-right: 20%;
 		}
 		.alert {
 			left: 20%;
 			right: 20%;
 		}
 	}
 }
 @media all and (min-width: 85em) {
 	body#pad {
 		textarea {
 			padding-left: 25%;
 			padding-right: 25%;
 		}
 		.alert {
 			left: 25%;
 			right: 25%;
 		}
 	}
 }
 @media all and (min-width: 105em) {
 	body#pad {
 		textarea {
 			padding-left: 30%;
 			padding-right: 30%;
 		}
 		.alert {
 			left: 30%;
 			right: 30%;
 		}
 	}
 }
 @media (pointer: coarse) {
 	body#pad, body#pad-sub {
 		#tools {
 			.opacity(.8);
 			.hidden {
 				.opacity(.8);
 			}
 		}
 	}
 }
diff --git a/static/js/menu.js b/static/js/menu.js
new file mode 100644
index 0000000..9b631a8
--- /dev/null
+++ b/static/js/menu.js
@@ -0,0 +1,34 @@
+var menuItems = document.querySelectorAll('li.has-submenu');
+var menuTimer;
+function closeMenu($menu) {
+    $menu.querySelector('a').setAttribute('aria-expanded', "false");
+    $menu.className = "has-submenu";
+}
+Array.prototype.forEach.call(menuItems, function(el, i){
+    el.addEventListener("mouseover", function(event){
+        let $menu = document.querySelectorAll(".has-submenu.open");
+        if ($menu.length > 0) {
+            closeMenu($menu[0]);
+        }
+        this.className = "has-submenu open";
+        this.querySelector('a').setAttribute('aria-expanded', "true");
+        clearTimeout(menuTimer);
+    });
+    el.addEventListener("mouseout", function(event){
+        menuTimer = setTimeout(function(event){
+            let $menu = document.querySelector(".has-submenu.open");
+            closeMenu($menu);
+        }, 500);
+    });
+    el.querySelector('a').addEventListener("click",  function(event){
+        if (this.parentNode.className == "has-submenu") {
+            this.parentNode.className = "has-submenu open";
+            this.setAttribute('aria-expanded', "true");
+        } else {
+            this.parentNode.className = "has-submenu";
+            this.setAttribute('aria-expanded', "false");
+        }
+        event.preventDefault();
+        return false;
+    });
+});
\ No newline at end of file
diff --git a/templates/base.tmpl b/templates/base.tmpl
index 556dfba..604d0ff 100644
--- a/templates/base.tmpl
+++ b/templates/base.tmpl
@@ -1,92 +1,93 @@
 {{define "base"}}<!DOCTYPE HTML>
 <html>
 	<head>
 		{{ template "head" . }}
 		<link rel="stylesheet" type="text/css" href="{{.Host}}/css/{{.Theme}}.css" />
 		<link rel="shortcut icon" href="{{.Host}}/favicon.ico" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
 		<meta name="application-name" content="{{.SiteName}}">
 		<meta name="application-url" content="{{.Host}}">
 		<meta property="og:site_name" content="{{.SiteName}}" />
 	</head>
 	<body {{template "body-attrs" .}}>
 		<div id="overlay"></div>
 		<header>
 			{{ if .Chorus }}<nav id="full-nav">
 				<div class="left-side">
 					<h2><a href="/">{{.SiteName}}</a></h2>
 				</div>
 			{{ else }}
 				<h2><a href="/">{{.SiteName}}</a></h2>
 			{{ end }}
 			{{if not .SingleUser}}
 			<nav id="user-nav">
 				{{if .Username}}
 				<nav class="dropdown-nav">
-					<ul><li><a>{{.Username}}</a> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" /><ul>
+					<ul><li class="has-submenu"><a>{{.Username}}</a> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" /><ul>
 							{{if .IsAdmin}}<li><a href="/admin">Admin dashboard</a></li>{{end}}
 							<li><a href="/me/settings">Account settings</a></li>
 							<li><a href="/me/export">Export</a></li>
 							{{if .CanInvite}}<li><a href="/me/invites">Invite people</a></li>{{end}}
 							<li class="separator"><hr /></li>
 							<li><a href="/me/logout">Log out</a></li>
 						</ul></li>
 					</ul>
 				</nav>
 				{{end}}
 				<nav class="tabs">
 					{{ if and .SimpleNav (not .SingleUser) }}
 					{{if and (and .LocalTimeline .CanViewReader) .Chorus}}<a href="/"{{if eq .Path "/"}} class="selected"{{end}}>Home</a>{{end}}
 					{{ end }}
 					{{if or .Chorus (not .Username)}}<a href="/about"{{if eq .Path "/about"}} class="selected"{{end}}>About</a>{{end}}
 					{{ if not .SingleUser }}
 						{{ if .Username }}
 					{{if or (not .Chorus) (gt .MaxBlogs 1)}}<a href="/me/c/"{{if eq .Path "/me/c/"}} class="selected"{{end}}>Blogs</a>{{end}}
 					{{if and (and .Chorus (eq .MaxBlogs 1)) .Username}}<a href="/{{.Username}}/"{{if eq .Path (printf "/%s/" .Username)}} class="selected"{{end}}>My Posts</a>{{end}}
 					{{if not .DisableDrafts}}<a href="/me/posts/"{{if eq .Path "/me/posts/"}} class="selected"{{end}}>Drafts</a>{{end}}
 						{{ end }}
 					{{if and (and  .LocalTimeline .CanViewReader) (not .Chorus)}}<a href="/read"{{if eq .Path "/read"}} class="selected"{{end}}>Reader</a>{{end}}
 					{{if eq .SignupPath "/signup"}}<a href="/signup"{{if eq .Path "/signup"}} class="selected"{{end}}>Sign up</a>{{end}}
 					{{if and (not .Username) (not .Private)}}<a href="/login"{{if eq .Path "/login"}} class="selected"{{end}}>Log in</a>{{else if .SimpleNav}}<a href="/me/logout">Log out</a>{{end}}
 					{{ end }}
 				</nav>
 				{{if .Chorus}}{{if .Username}}<div class="right-side" style="font-size: 0.86em;">
 							<a class="simple-btn" href="/new">New Post</a>
 						</div>{{end}}
 					</nav>
 				{{end}}
 			</nav>
 			{{end}}
 		</header>
 
 		<div id="official-writing">
 			{{ template "content" . }}
 		</div>
 
 		{{ template "footer" . }}
 		
 		{{if not .JSDisabled}}
+		<script type="text/javascript" src="/js/menu.js"></script>
 		<script type="text/javascript">
 		{{if .WebFonts}}
 		try { // Google Fonts
 		  WebFontConfig = {
 			custom: { families: [ 'Lora:400,700:latin', 'Open+Sans:400,700:latin' ], urls: [ '/css/fonts.css' ] }
 		  };
 		  (function() {
 			var wf = document.createElement('script');
 			wf.src = '/js/webfont.js';
 			wf.type = 'text/javascript';
 			wf.async = 'true';
 			var s = document.getElementsByTagName('script')[0];
 			s.parentNode.insertBefore(wf, s);
 			})();
 		} catch (e) { /* ¯\_(ツ)_/¯ */ }
 		{{end}}
 		</script>
 		{{else}}
 			{{if .WebFonts}}<link href="{{.Host}}/css/fonts.css" rel="stylesheet" type="text/css" />{{end}}
 		{{end}}
 	</body>
 </html>{{end}}
 {{define "body-attrs"}}{{end}}
diff --git a/templates/collection.tmpl b/templates/collection.tmpl
index 3abcc83..d39c58c 100644
--- a/templates/collection.tmpl
+++ b/templates/collection.tmpl
@@ -1,234 +1,235 @@
 {{define "collection"}}<!DOCTYPE HTML>
 <html {{if .Language}}lang="{{.Language}}"{{end}} dir="{{.Direction}}">
 	<head>
 		<meta charset="utf-8">
 
 		<title>{{.DisplayTitle}}{{if not .SingleUser}} &mdash; {{.SiteName}}{{end}}</title>
 		
 		<link rel="stylesheet" type="text/css" href="/css/write.css" />
 		<link rel="shortcut icon" href="/favicon.ico" />
 		<link rel="canonical" href="{{.CanonicalURL}}">
 		{{if gt .CurrentPage 1}}<link rel="prev" href="{{.PrevPageURL .Prefix .CurrentPage .IsTopLevel}}">{{end}}
 		{{if lt .CurrentPage .TotalPages}}<link rel="next" href="{{.NextPageURL .Prefix .CurrentPage .IsTopLevel}}">{{end}}
 		{{if not .IsPrivate}}<link rel="alternate" type="application/rss+xml" title="{{.DisplayTitle}} &raquo; Feed" href="{{.CanonicalURL}}feed/" />{{end}}
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
 		<meta name="generator" content="WriteFreely">
 		<meta name="description" content="{{.Description}}">
 		<meta itemprop="name" content="{{.DisplayTitle}}">
 		<meta itemprop="description" content="{{.Description}}">
 		<meta name="twitter:card" content="summary">
 		<meta name="twitter:title" content="{{.DisplayTitle}}">
 		<meta name="twitter:image" content="{{.AvatarURL}}">
 		<meta name="twitter:description" content="{{.Description}}">
 		<meta property="og:title" content="{{.DisplayTitle}}" />
 		<meta property="og:site_name" content="{{.DisplayTitle}}" />
 		<meta property="og:type" content="article" />
 		<meta property="og:url" content="{{.CanonicalURL}}" />
 		<meta property="og:description" content="{{.Description}}" />
 		<meta property="og:image" content="{{.AvatarURL}}">
 		{{if .StyleSheet}}<style type="text/css">{{.StyleSheetDisplay}}</style>{{end}}
 
 		{{if .RenderMathJax}}
 		  <!-- Add mathjax logic -->
 		  {{template "mathjax" .}}
 		{{end}}
 
 		<!-- Add highlighting logic -->
 		{{template "highlighting" . }}
 
 	</head>
 	<body id="collection" itemscope itemtype="http://schema.org/WebPage">
 		{{if or .IsOwner .SingleUser}}<nav id="manage"><ul>
-			<li><a onclick="void(0)">&#9776; Menu</a>
+			<li class="has-submenu"><a onclick="void(0)">&#9776; Menu</a>
 				<ul>
 					{{ if .IsOwner }}
 					{{if .SingleUser}}
 					<li><a href="/me/new">New Post</a></li>
 					{{else}}
 					<li><a href="/#{{.Alias}}" class="write">{{.SiteName}}</a></li>
 					{{end}}
 					{{if .SimpleNav}}<li><a href="/new#{{.Alias}}">New Post</a></li>{{end}}
 					<li><a href="/me/c/{{.Alias}}">Customize</a></li>
 					<li><a href="/me/c/{{.Alias}}/stats">Stats</a></li>
 					<li class="separator"><hr /></li>
 					{{if not .SingleUser}}<li><a href="/me/c/"><img class="ic-18dp" src="/img/ic_blogs_dark@2x.png" /> View Blogs</a></li>{{end}}
 					<li><a href="/me/posts/"><img class="ic-18dp" src="/img/ic_list_dark@2x.png" /> View Drafts</a></li>
 					{{ else }}
 					<li><a href="/login">Log in</a></li>
 					{{ end }}
 				</ul>
 			</li>
 		</ul></nav>{{end}}
 		
 		<header>
 		{{if .Silenced}}
 			{{template "user-silenced"}}
 		{{end}}
 		<h1 dir="{{.Direction}}" id="blog-title">{{if .Posts}}{{else}}<span class="writeas-prefix"><a href="/">write.as</a></span> {{end}}<a href="/{{if .IsTopLevel}}{{else}}{{.Prefix}}{{.Alias}}/{{end}}" class="h-card p-author u-url" rel="me author">{{.DisplayTitle}}</a></h1>
 		{{if .Description}}<p class="description p-note">{{.Description}}</p>{{end}}
 		{{/*if not .Public/*}}
 			<!--p class="meta-note"><span>Private collection</span>. Only you can see this page.</p-->
 		{{/*end*/}}
 		{{if .PinnedPosts}}<nav>
 			{{range .PinnedPosts}}<a class="pinned" href="{{if not $.SingleUser}}/{{$.Alias}}/{{.Slug.String}}{{else}}{{.CanonicalURL $.Host}}{{end}}">{{.PlainDisplayTitle}}</a>{{end}}</nav>
 		{{end}}
 		</header>
 		
 		{{if .Posts}}<section id="wrapper" itemscope itemtype="http://schema.org/Blog">{{else}}<div id="wrapper">{{end}}
 
 			{{if .IsWelcome}}
 			<div id="welcome">
 				<h2>Welcome, <strong>{{.Username}}</strong>!</h2>
 				<p>This is your new blog.</p>
 				<p><a class="simple-cta" href="/#{{.Alias}}">Start writing</a>, or <a class="simple-cta" href="/me/c/{{.Alias}}">customize</a> your blog.</p>
 				<p>Check out our <a class="simple-cta" href="https://guides.write.as/writing/?pk_campaign=welcome">writing guide</a> to see what else you can do, and <a class="simple-cta" href="/contact">get in touch</a> anytime with questions or feedback.</p>
 			</div>
 			{{end}}
 
 			{{template "posts" .}}
 
 		{{if gt .TotalPages 1}}<nav id="paging" class="content-container clearfix">
 			{{if or (and .Format.Ascending (le .CurrentPage .TotalPages)) (isRTL .Direction)}}
 				{{if gt .CurrentPage 1}}<a href="{{.PrevPageURL .Prefix .CurrentPage .IsTopLevel}}">&#8672; {{if and .Format.Ascending (le .CurrentPage .TotalPages)}}Previous{{else}}Newer{{end}}</a>{{end}}
 				{{if lt .CurrentPage .TotalPages}}<a style="float:right;" href="{{.NextPageURL .Prefix .CurrentPage .IsTopLevel}}">{{if and .Format.Ascending (lt .CurrentPage .TotalPages)}}Next{{else}}Older{{end}} &#8674;</a>{{end}}
 			{{else}}
 				{{if lt .CurrentPage .TotalPages}}<a href="{{.NextPageURL .Prefix .CurrentPage .IsTopLevel}}">&#8672; Older</a>{{end}}
 				{{if gt .CurrentPage 1}}<a style="float:right;" href="{{.PrevPageURL .Prefix .CurrentPage .IsTopLevel}}">Newer &#8674;</a>{{end}}
 			{{end}}
 		</nav>{{end}}
 
 		{{if .Posts}}</section>{{else}}</div>{{end}}
 
 		{{if .ShowFooterBranding }}
 		<footer>
 			<hr />
 			<nav dir="ltr">
 				{{if not .SingleUser}}<a class="home pubd" href="/">{{.SiteName}}</a> &middot; {{end}}powered by <a style="margin-left:0" href="https://writefreely.org">writefreely</a>
 			</nav>
 		</footer>
 		{{ end }}
 	</body>
 
 	{{if .CanShowScript}}
 		{{range .ExternalScripts}}<script type="text/javascript" src="{{.}}" async></script>{{end}}
 		{{if .Script}}<script type="text/javascript">{{.ScriptDisplay}}</script>{{end}}
 	{{end}}
 	<script src="/js/h.js"></script>
 	<script src="/js/postactions.js"></script>
 	<script src="/js/localdate.js"></script>
+	<script type="text/javascript" src="/js/menu.js"></script>
 	<script type="text/javascript">
 var deleting = false;
 function delPost(e, id, owned) {
 	e.preventDefault();
 	if (deleting) {
 		return;
 	}
 
 	// TODO: UNDO!
 	if (window.confirm('Are you sure you want to delete this post?')) {
 		// AJAX
 		deletePost(id, "", function() {
 			// Remove post from list
 			var $postEl = document.getElementById('post-' + id);
 			$postEl.parentNode.removeChild($postEl);
 			// TODO: add next post from this collection at the bottom
 		});
 	}
 }
 
 var deletePost = function(postID, token, callback) {
 	deleting = true;
 
 	var $delBtn = document.getElementById('post-' + postID).getElementsByClassName('delete action')[0];
 	$delBtn.innerHTML = '...';
 
 	var http = new XMLHttpRequest();
 	var url = "/api/posts/" + postID;
 	http.open("DELETE", url, true);
 	http.onreadystatechange = function() {
 		if (http.readyState == 4) {
 			deleting = false;
 			if (http.status == 204) {
 				callback();
 			} else if (http.status == 409) {
 				$delBtn.innerHTML = 'delete';
 				alert("Post is synced to another account. Delete the post from that account instead.");
 				// TODO: show "remove" button instead of "delete" now
 				// Persist that state.
 				// Have it remove the post locally only.
 			} else {
 				$delBtn.innerHTML = 'delete';
 				alert("Failed to delete." + (http.status>=500?" Please try again.":""));
 			}
 		}
 	}
 	http.send();
 };
 
 var pinning = false;
 function pinPost(e, postID, slug, title) {
 	e.preventDefault();
 	if (pinning) {
 		return;
 	}
 	pinning = true;
 
 	var callback = function() {
 		// Visibly remove post from collection
 		var $postEl = document.getElementById('post-' + postID);
 		$postEl.parentNode.removeChild($postEl);
 		var $header = document.getElementsByTagName('header')[0];
 		var $pinnedNavs = $header.getElementsByTagName('nav');
 		// Add link to nav
 		var link = '<a class="pinned" href="{{if not .SingleUser}}/{{.Alias}}/{{end}}'+slug+'">'+title+'</a>';
 		if ($pinnedNavs.length == 0) {
 			$header.insertAdjacentHTML("beforeend", '<nav>'+link+'</nav>');
 		} else {
 			$pinnedNavs[0].insertAdjacentHTML("beforeend", link);
 		}
 	};
 
 	var $pinBtn = document.getElementById('post-' + postID).getElementsByClassName('pin action')[0];
 	$pinBtn.innerHTML = '...';
 
 	var http = new XMLHttpRequest();
 	var url = "/api/collections/{{.Alias}}/pin";
 	var params = [ { "id": postID } ];
 	http.open("POST", url, true);
 	http.setRequestHeader("Content-type", "application/json");
 	http.onreadystatechange = function() {
 		if (http.readyState == 4) {
 			pinning = false;
 			if (http.status == 200) {
 				callback();
 			} else if (http.status == 409) {
 				$pinBtn.innerHTML = 'pin';
 				alert("Post is synced to another account. Delete the post from that account instead.");
 				// TODO: show "remove" button instead of "delete" now
 				// Persist that state.
 				// Have it remove the post locally only.
 			} else {
 				$pinBtn.innerHTML = 'pin';
 				alert("Failed to pin." + (http.status>=500?" Please try again.":""));
 			}
 		}
 	}
 	http.send(JSON.stringify(params));
 };
 
 	try {
 	  WebFontConfig = {
 		custom: { families: [ 'Lora:400,700:latin', 'Open+Sans:400,700:latin' ], urls: [ '/css/fonts.css' ] }
 	  };
 	  (function() {
 		var wf = document.createElement('script');
 		wf.src = '/js/webfont.js';
 		wf.type = 'text/javascript';
 		wf.async = 'true';
 		var s = document.getElementsByTagName('script')[0];
 		s.parentNode.insertBefore(wf, s);
 	  })();
 	} catch (e) {}
 	</script>
 </html>{{end}}
diff --git a/templates/pad.tmpl b/templates/pad.tmpl
index 4afc1a6..86039ef 100644
--- a/templates/pad.tmpl
+++ b/templates/pad.tmpl
@@ -1,396 +1,397 @@
 {{define "pad"}}<!DOCTYPE HTML>
 <html>
 	<head>
 
 		<title>{{if .Editing}}Editing {{if .Post.Title}}{{.Post.Title}}{{else}}{{.Post.Id}}{{end}}{{else}}New Post{{end}} &mdash; {{.SiteName}}</title>
 		
 		<link rel="stylesheet" type="text/css" href="/css/write.css" />
 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
 		<meta name="google" value="notranslate">
 	</head>
 	<body id="pad" class="light">
 
 		<div id="overlay"></div>
 		
 		<textarea id="writer" placeholder="Write..." class="{{.Post.Font}}" autofocus>{{if .Post.Title}}# {{.Post.Title}}
 
 {{end}}{{.Post.Content}}</textarea>
 
 		<div class="alert success hidden" id="edited-elsewhere">This post has been updated elsewhere since you last published! <a href="#" id="erase-edit">Delete draft and reload</a>.</div>
 		
 		<header id="tools">
 			<div id="clip">
 				{{if not .SingleUser}}<h1><a href="/me/c/" title="View blogs"><img class="ic-24dp" src="/img/ic_blogs_dark@2x.png" /></a></h1>{{end}}
 				<nav id="target" {{if .SingleUser}}style="margin-left:0"{{end}}><ul>
 						{{if .Editing}}<li>{{if .EditCollection}}<a href="{{.EditCollection.CanonicalURL}}">{{.EditCollection.Title}}</a>{{else}}<a>Draft</a>{{end}}</li>
-						{{else}}<li><a id="publish-to"><span id="target-name">Draft</span> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" /></a>
+						{{else}}<li class="has-submenu"><a id="publish-to"><span id="target-name">Draft</span> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" /></a>
 						<ul>
 							<li class="menu-heading">Publish to...</li>
 							{{if .Blogs}}{{range $idx, $el := .Blogs}}
 								<li class="target{{if eq $idx 0}} selected{{end}}" id="blog-{{$el.Alias}}"><a href="#{{$el.Alias}}"><i class="material-icons md-18">public</i> {{if $el.Title}}{{$el.Title}}{{else}}{{$el.Alias}}{{end}}</a></li>
 							{{end}}{{end}}
 							<li class="target" id="blog-anonymous"><a href="#anonymous"><i class="material-icons md-18">description</i> <em>Draft</em></a></li>
 							<li id="user-separator" class="separator"><hr /></li>
 						{{ if .SingleUser }}
 							<li><a href="/"><i class="material-icons md-18">launch</i> View Blog</a></li>
 							<li><a href="/me/c/{{.Username}}"><i class="material-icons md-18">palette</i> Customize</a></li>
 							<li><a href="/me/c/{{.Username}}/stats"><i class="material-icons md-18">trending_up</i> Stats</a></li>
 						{{ else }}
 							<li><a href="/me/c/"><i class="material-icons md-18">library_books</i> View Blogs</a></li>
 						{{ end }}
 							<li><a href="/me/posts/"><i class="material-icons md-18">view_list</i> View Drafts</a></li>
 							<li><a href="/me/logout"><i class="material-icons md-18">power_settings_new</i>  Log out</a></li>
 						</ul>
 					</li>{{end}}
 				</ul></nav>
 				<nav id="font-picker" class="if-room room-3 hidden" style="margin-left:-1em"><ul>
-						<li><a href="#" id="" onclick="return false"><img class="ic-24dp" src="/img/ic_font_dark@2x.png" /> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" /></a>
+						<li class="has-submenu"><a href="#" id="" onclick="return false"><img class="ic-24dp" src="/img/ic_font_dark@2x.png" /> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" /></a>
 						<ul style="text-align: center">
 							<li class="menu-heading">Font</li>
 							<li class="selected"><a class="font norm" href="#norm">Serif</a></li>
 							<li><a class="font sans" href="#sans">Sans-serif</a></li>
 							<li><a class="font wrap" href="#wrap">Monospace</a></li>
 						</ul>
 					</li>
 				</ul></nav>
 				<span id="wc" class="hidden if-room room-4">0 words</span>
 			</div>
 			<noscript style="margin-left: 2em;"><strong>NOTE</strong>: for now, you'll need Javascript enabled to post.</noscript>
 			<div id="belt">
 				{{if .Editing}}<div class="tool hidden if-room"><a href="{{if .EditCollection}}{{.EditCollection.CanonicalURL}}{{.Post.Slug}}/edit/meta{{else}}/{{if .SingleUser}}d/{{end}}{{.Post.Id}}/meta{{end}}" title="Edit post metadata" id="edit-meta"><img class="ic-24dp" src="/img/ic_info_dark@2x.png" /></a></div>{{end}}
 				<div class="tool hidden if-room room-2"><a href="#theme" title="Toggle theme" id="toggle-theme"><img class="ic-24dp" src="/img/ic_brightness_dark@2x.png" /></a></div>
 				<div class="tool if-room room-1"><a href="{{if not .User}}/pad/posts{{else}}/me/posts/{{end}}" title="View posts" id="view-posts"><img class="ic-24dp" src="/img/ic_list_dark@2x.png" /></a></div>
 				<div class="tool"><a href="#publish" title="Publish" id="publish"><img class="ic-24dp" src="/img/ic_send_dark@2x.png" /></a></div>
 			</div>
 		</header>
 
 		<script src="/js/h.js"></script>
+		<script type="text/javascript" src="/js/menu.js"></script>
 		<script>
 		function toggleTheme() {
 			var btns = Array.prototype.slice.call(document.getElementById('tools').querySelectorAll('a img'));
 			var newTheme = '';
 			if (document.body.classList.contains('light')) {
 				newTheme = 'dark';
 				document.body.className = document.body.className.replace(/(?:^|\s)light(?!\S)/g, newTheme);
 				for (var i=0; i<btns.length; i++) {
 					btns[i].src = btns[i].src.replace('_dark@2x.png', '@2x.png');
 				}
 			} else {
 				newTheme = 'light';
 				document.body.className = document.body.className.replace(/(?:^|\s)dark(?!\S)/g, newTheme);
 				for (var i=0; i<btns.length; i++) {
 					btns[i].src = btns[i].src.replace('@2x.png', '_dark@2x.png');
 				}
 			}
 			H.set('padTheme', newTheme);
 		}
 		if (H.get('padTheme', 'light') != 'light') {
 			toggleTheme();
 		}
 		var $writer = H.getEl('writer');
 		var $btnPublish = H.getEl('publish');
 		var $btnEraseEdit = H.getEl('edited-elsewhere');
 		var $wc = H.getEl("wc");
 		var updateWordCount = function() {
 			var words = 0;
 			var val = $writer.el.value.trim();
 			if (val != '') {
 				words = $writer.el.value.trim().replace(/\s+/gi, ' ').split(' ').length;
 			}
 			$wc.el.innerText = words + " word" + (words != 1 ? "s" : "");
 		};
 		var setButtonStates = function() {
 			if (!canPublish) {
 				$btnPublish.el.className = 'disabled';
 				return;
 			}
 			if ($writer.el.value.length === 0 || (draftDoc != 'lastDoc' && $writer.el.value == origDoc)) {
 				$btnPublish.el.className = 'disabled';
 			} else {
 				$btnPublish.el.className = '';
 			}
 		};
 		{{if .Post.Id}}var draftDoc = 'draft{{.Post.Id}}';
 		var origDoc = '{{.Post.Content}}';{{else}}var draftDoc = 'lastDoc';{{end}}
 		var updatedStr = '{{.Post.Updated8601}}';
 		var updated = null;
 		if (updatedStr != '') {
 			updated = new Date(updatedStr);
 		}
 		var ok = H.load($writer, draftDoc, true, updated);
 		if (!ok) {
 			// Show "edited elsewhere" warning
 			$btnEraseEdit.el.classList.remove('hidden');
 		}
 		var defaultTimeSet = false;
 		updateWordCount();
 		
 		var typingTimer;
 		var doneTypingInterval = 200;
 
 		var posts;
 		{{if and .Post.Id (not .Post.Slug)}}
 		var token = null;
 		var curPostIdx;
 		posts = JSON.parse(H.get('posts', '[]'));
 		for (var i=0; i<posts.length; i++) {
 			if (posts[i].id == "{{.Post.Id}}") {
 				token = posts[i].token;
 				break;
 			}
 		}
 		var canPublish = token != null;
 		{{else}}var canPublish = true;{{end}}
 		var publishing = false;
 		var justPublished = false;
 		var silenced = {{.Silenced}};
 		var publish = function(content, font) {
 			if (silenced === true) {
 				alert("Your account is silenced, so you can't publish or update posts.");
 				return;
 			}
 			{{if and (and .Post.Id (not .Post.Slug)) (not .User)}}
 			if (!token) {
 				alert("You don't have permission to update this post.");
 				return;
 			}
 			if ($btnPublish.el.className == 'disabled') {
 				return;
 			}
 			{{end}}
 			$btnPublish.el.children[0].textContent = 'more_horiz';
 			publishing = true;
 			var xpostTarg = H.get('crosspostTarget', '[]');
 
 			var http = new XMLHttpRequest();
 			var lang = navigator.languages ? navigator.languages[0] : (navigator.language || navigator.userLanguage);
 			lang = lang.substring(0, 2);
 			var post = H.getTitleStrict(content);
 
 			var params = {
 				body: post.content,
 				title: post.title,
 				font: font,
 				lang: lang
 			};
 			{{ if .Post.Slug }}
 			var url = "/api/collections/{{.EditCollection.Alias}}/posts/{{.Post.Id}}";
 			{{ else if .Post.Id }}
 			var url = "/api/posts/{{.Post.Id}}";
 			if (typeof token === 'undefined' || !token) {
 				token = "";
 			}
 			params.token = token;
 			{{ else }}
 			var url = "/api/posts";
 			var postTarget = H.get('postTarget', 'anonymous');
 			if (postTarget != 'anonymous') {
 				url = "/api/collections/" + postTarget + "/posts";
 			}
 			params.crosspost = JSON.parse(xpostTarg);
 			{{ end }}
 
 			http.open("POST", url, true);
 
 			// Send the proper header information along with the request
 			http.setRequestHeader("Content-type", "application/json");
 
 			http.onreadystatechange = function() {
 				if (http.readyState == 4) {
 					publishing = false;
 					if (http.status == 200 || http.status == 201) {
 						data = JSON.parse(http.responseText);
 						id = data.data.id;
 						nextURL = '{{if .SingleUser}}/d{{end}}/'+id;
 						localStorage.setItem('draft'+id+'-published', new Date().toISOString());
 
 						{{ if not .Post.Id }}
 							// Post created
 							if (postTarget != 'anonymous') {
 							  nextURL = {{if not .SingleUser}}'/'+postTarget+{{end}}'/'+data.data.slug;
 							}
 							editToken = data.data.token;
 
 							{{ if not .User }}if (postTarget == 'anonymous') {
 								// Save the data
 								var posts = JSON.parse(H.get('posts', '[]'));
 
 								{{if .Post.Id}}var newPost = H.createPost("{{.Post.Id}}", token, content);
 								for (var i=0; i<posts.length; i++) {
 									if (posts[i].id == "{{.Post.Id}}") {
 										posts[i].title = newPost.title;
 										posts[i].summary = newPost.summary;
 										break;
 									}
 								}
 								nextURL = "/pad/posts";{{else}}posts.push(H.createPost(id, editToken, content));{{end}}
 
 								H.set('posts', JSON.stringify(posts));
 							}
 							{{ end }}
 						{{ end }}
 
 						justPublished = true;
 						if (draftDoc != 'lastDoc') {
 							H.remove(draftDoc);
 							{{if .Editing}}H.remove('draft{{.Post.Id}}font');{{end}}
 						} else {
 							H.set(draftDoc, '');
 						}
 
 						{{if .EditCollection}}
 						window.location = '{{.EditCollection.CanonicalURL}}{{.Post.Slug}}';
 						{{else}}
 						window.location = nextURL;
 						{{end}}
 					} else {
 						$btnPublish.el.children[0].textContent = 'send';
 						alert("Failed to post. Please try again.");
 					}
 				}
 			}
 			http.send(JSON.stringify(params));
 		};
 
 		setButtonStates();
 		$writer.on('keyup input', function() {
 			setButtonStates();
 			clearTimeout(typingTimer);
 			typingTimer = setTimeout(doneTyping, doneTypingInterval);
 		}, false);
 		$writer.on('keydown', function(e) {
 			clearTimeout(typingTimer);
 			if (e.keyCode == 13 && (e.metaKey || e.ctrlKey)) {
 				$btnPublish.el.click();
 			}
 		});
 		$btnPublish.on('click', function(e) {
 			e.preventDefault();
 			if (!publishing && $writer.el.value) {
 				var content = $writer.el.value;
 				publish(content, selectedFont);
 			}
 		});
 		H.getEl('erase-edit').on('click', function(e) {
 			e.preventDefault();
 			H.remove(draftDoc);
 			H.remove(draftDoc+'-published');
 			justPublished = true; // Block auto-save
 			location.reload();
 		});
 
 		H.getEl('toggle-theme').on('click', function(e) {
 			e.preventDefault();
 			var newTheme = 'light';
 			if (document.body.className == 'light') {
 				newTheme = 'dark';
 			}
 			toggleTheme();
 		});
 
 		var targets = document.querySelectorAll('#target li.target a');
 		for (var i=0; i<targets.length; i++) {
 			targets[i].addEventListener('click', function(e) {
 				e.preventDefault();
 				var targetName = this.href.substring(this.href.indexOf('#')+1);
 				H.set('postTarget', targetName);
 
 				document.querySelector('#target li.target.selected').classList.remove('selected');
 				this.parentElement.classList.add('selected');
 				var newText = this.innerText.split(' ');
 				newText.shift();
 				document.getElementById('target-name').innerText = newText.join(' ');
 			});
 		}
 		var postTarget = H.get('postTarget', '{{if .Blogs}}{{$blog := index .Blogs 0}}{{$blog.Alias}}{{else}}anonymous{{end}}');
 		if (location.hash != '') {
 			postTarget = location.hash.substring(1);
 			// TODO: pushState to /pad (or whatever the URL is) so we live on a clean URL
 			location.hash = '';
 		}
 		var pte = document.querySelector('#target li.target#blog-'+postTarget+' a');
 		if (pte != null) {
 			pte.click();
 		} else {
 			postTarget = 'anonymous';
 			H.set('postTarget', postTarget);
 		}
 
 		var sansLoaded = false;
 		WebFontConfig = {
 			custom: { families: [ 'Lora:400,700:latin' ], urls: [ '/css/fonts.css' ] }
 		};
 		var loadSans = function() {
 		  if (sansLoaded) return;
 		  sansLoaded = true;
 		  WebFontConfig.custom.families.push('Open+Sans:400,700:latin');
 		  try {
 			  (function() {
 				var wf=document.createElement('script');
 				wf.src = '/js/webfont.js';
 				wf.type='text/javascript';
 				wf.async='true';
 				var s=document.getElementsByTagName('script')[0];
 				s.parentNode.insertBefore(wf, s);
 			  })();
 		  } catch (e) {}
 		};
 		var fonts = document.querySelectorAll('nav#font-picker a.font');
 		for (var i=0; i<fonts.length; i++) {
 			fonts[i].addEventListener('click', function(e) {
 				e.preventDefault();
 				selectedFont = this.href.substring(this.href.indexOf('#')+1);
 				$writer.el.className = selectedFont;
 				document.querySelector('nav#font-picker li.selected').classList.remove('selected');
 				this.parentElement.classList.add('selected');
 				H.set('{{if .Editing}}draft{{.Post.Id}}font{{else}}padFont{{end}}', selectedFont);
 				if (selectedFont == 'sans') {
 					loadSans();
 				}
 			});
 		}
 		var selectedFont = H.get('{{if .Editing}}draft{{.Post.Id}}font{{else}}padFont{{end}}', '{{.Post.Font}}');
 		var sfe = document.querySelector('nav#font-picker a.font.'+selectedFont);
 		if (sfe != null) {
 			sfe.click();
 		}
 
 		var doneTyping = function() {
 			if (draftDoc == 'lastDoc' || $writer.el.value != origDoc) {
 				H.save($writer, draftDoc);
 				if (!defaultTimeSet) {
 					var lastLocalPublishStr = localStorage.getItem(draftDoc+'-published');
 					if (lastLocalPublishStr == null || lastLocalPublishStr == '') {
 						localStorage.setItem(draftDoc+'-published', updatedStr);
 					}
 					defaultTimeSet = true;
 				}
 				updateWordCount();
 			}
 		};
 		window.addEventListener('beforeunload', function(e) {
 			if (draftDoc != 'lastDoc' && $writer.el.value == origDoc) {
 				H.remove(draftDoc);
 				H.remove(draftDoc+'-published');
 			} else if (!justPublished) {
 				doneTyping();
 			}
 		});
 
 		try {
 		  (function() {
 			var wf=document.createElement('script');
 			wf.src = '/js/webfont.js';
 			wf.type='text/javascript';
 			wf.async='true';
 			var s=document.getElementsByTagName('script')[0];
 			s.parentNode.insertBefore(wf, s);
 		  })();
 		} catch (e) {
 		  // whatevs
 		}
 		</script>
 		<link href="/css/icons.css" rel="stylesheet">
 	</body>
 </html>{{end}}
diff --git a/templates/user/include/footer.tmpl b/templates/user/include/footer.tmpl
index e60f86f..a2fe989 100644
--- a/templates/user/include/footer.tmpl
+++ b/templates/user/include/footer.tmpl
@@ -1,40 +1,41 @@
 {{define "footer"}}
 	{{template "foot" .}}
 	{{template "body-end" .}}
 {{end}}
 {{define "foot"}}
 	</div>
 	<footer>
 		<hr />
 		<nav>
 			<a class="home" href="/">{{.SiteName}}</a>
 			{{if not .SingleUser}}<a href="/about">about</a>{{end}}
 			{{if and (not .SingleUser) .LocalTimeline}}<a href="/read">reader</a>{{end}}
 			<a href="https://writefreely.org/guide/{{.OfficialVersion}}" target="guide">writer's guide</a>
 			{{if not .SingleUser}}<a href="/privacy">privacy</a>{{end}}
       {{if .WFModesty}}
 			<p style="font-size: 0.9em">powered by <a href="https://writefreely.org">writefreely</a></p>
 			{{else}}
 			<a href="https://writefreely.org">writefreely {{.Version}}</a>
 			{{end}}
 		</nav>
 	</footer>
 
+	<script type="text/javascript" src="/js/menu.js"></script>
 	<script type="text/javascript">
 	try { // Google Fonts
 	  WebFontConfig = {
 		custom: { families: [ 'Lora:400,700:latin' ], urls: [ '/css/fonts.css' ] }
 	  };
 	  (function() {
 		var wf = document.createElement('script');
 		wf.src = '/js/webfont.js';
 		wf.type = 'text/javascript';
 		wf.async = 'true';
 		var s = document.getElementsByTagName('script')[0];
 		s.parentNode.insertBefore(wf, s);
 	  })();
 	} catch (e) { /* ¯\_(ツ)_/¯ */ }
 	</script>
 {{end}}
 {{define "body-end"}}</body>
 </html>{{end}}
diff --git a/templates/user/include/header.tmpl b/templates/user/include/header.tmpl
index 16978ee..21a81ff 100644
--- a/templates/user/include/header.tmpl
+++ b/templates/user/include/header.tmpl
@@ -1,113 +1,113 @@
 {{define "user-navigation"}}
 	<header class="{{if .SingleUser}}singleuser{{else}}multiuser{{end}}">
 		{{if .SingleUser}}
 		<nav id="user-nav">
 			<nav class="dropdown-nav">
 				<ul><li><a href="/" title="View blog" class="title">{{.SiteName}}</a> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" />
 					<ul>
 						<li><a href="/me/c/{{.Username}}">Customize</a></li>
 						<li><a href="/me/c/{{.Username}}/stats">Stats</a></li>
 						<li class="separator"><hr /></li>
 						{{if .IsAdmin}}<li><a href="/admin">Admin</a></li>{{end}}
 						<li><a href="/me/settings">Settings</a></li>
 						<li><a href="/me/import">Import posts</a></li>
 						<li><a href="/me/export">Export</a></li>
 						<li class="separator"><hr /></li>
 						<li><a href="/me/logout">Log out</a></li>
 					</ul></li>
 				</ul>
 			</nav>
 			<nav class="tabs">
 				<a href="/me/posts/"{{if eq .Path "/me/posts/"}} class="selected"{{end}}>Drafts</a>
 				<a href="/me/new">New Post</a>
 			</nav>
 		</nav>
 		{{else}}
 		<nav id="full-nav">
 			<div class="left-side">
 				<h1><a href="/" title="Return to editor">{{.SiteName}}</a></h1>
 			</div>
 		<nav id="user-nav">
 			{{if .Username}}
 			<nav class="dropdown-nav">
-				<ul><li><a>{{.Username}}</a> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" /><ul>
+				<ul><li class="has-submenu"><a>{{.Username}}</a> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" /><ul>
 						{{if .IsAdmin}}<li><a href="/admin">Admin dashboard</a></li>{{end}}
 						<li><a href="/me/settings">Account settings</a></li>
 						<li><a href="/me/import">Import posts</a></li>
 						<li><a href="/me/export">Export</a></li>
 						{{if .CanInvite}}<li><a href="/me/invites">Invite people</a></li>{{end}}
 						<li class="separator"><hr /></li>
 						<li><a href="/me/logout">Log out</a></li>
 					</ul></li>
 				</ul>
 			</nav>
 			{{end}}
 			<nav class="tabs">
 				{{if .SimpleNav}}
 					{{ if not .SingleUser }}
 					{{if and (and .LocalTimeline .CanViewReader) .Chorus}}<a href="/"{{if eq .Path "/"}} class="selected"{{end}}>Home</a>{{end}}
 					{{ end }}
 					<a href="/about">About</a>
 					{{ if not .SingleUser }}
 						{{ if .Username }}
 					{{if gt .MaxBlogs 1}}<a href="/me/c/"{{if eq .Path "/me/c/"}} class="selected"{{end}}>Blogs</a>{{end}}
 					{{if and .Chorus (eq .MaxBlogs 1)}}<a href="/{{.Username}}/"{{if eq .Path (printf "/%s/" .Username)}} class="selected"{{end}}>My Posts</a>{{end}}
 					{{if not .DisableDrafts}}<a href="/me/posts/"{{if eq .Path "/me/posts/"}} class="selected"{{end}}>Drafts</a>{{end}}
 						{{ end }}
 					{{if and (and .LocalTimeline .CanViewReader) (not .Chorus)}}<a href="/read">Reader</a>{{end}}
 					{{if and (and (and .Chorus .OpenRegistration) (not .Username)) (or (not .Private) (ne .Landing ""))}}<a href="/signup"{{if eq .Path "/signup"}} class="selected"{{end}}>Sign up</a>{{end}}
 					{{if .Username}}<a href="/me/logout">Log out</a>{{else}}<a href="/login">Log in</a>{{end}}
 					{{ end }}
 				{{else}}
 					<a href="/me/c/"{{if eq .Path "/me/c/"}} class="selected"{{end}}>Blogs</a>
 					{{if not .DisableDrafts}}<a href="/me/posts/"{{if eq .Path "/me/posts/"}} class="selected"{{end}}>Drafts</a>{{end}}
 					{{if and (and .LocalTimeline .CanViewReader) (not .Chorus)}}<a href="/read">Reader</a>{{end}}
 				{{end}}
 			</nav>
 		</nav>
 		{{if .Chorus}}{{if .Username}}<div class="right-side">
 					<a class="simple-btn" href="/new">New Post</a>
 				</div>{{end}}
 			</nav>
 		{{end}}
 		{{end}}
 	</header>
 {{end}}
 {{define "header"}}<!DOCTYPE HTML>
 <html>
 <head>
 	<meta charset="utf-8">
 
 	<title>{{.PageTitle}} {{if .Separator}}{{.Separator}}{{else}}&mdash;{{end}} {{.SiteName}}</title>
 
 	<link rel="stylesheet" type="text/css" href="/css/write.css" />
 	<link rel="shortcut icon" href="/favicon.ico" />
 	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 	<meta name="theme-color" content="#888888" />
 	<meta name="apple-mobile-web-app-title" content="{{.SiteName}}">
 	<link rel="apple-touch-icon" sizes="152x152" href="/img/touch-icon-152.png">
 	<link rel="apple-touch-icon" sizes="167x167" href="/img/touch-icon-167.png">
 	<link rel="apple-touch-icon" sizes="180x180" href="/img/touch-icon-180.png">
 </head>
 <body id="me">
 	{{template "user-navigation" .}}
 	<div id="official-writing">
 {{end}}
 
 {{define "admin-header"}}
 <header class="admin">
 	<h1>Admin</h1>
 	<nav id="admin" class="pager">
 		<a href="/admin" {{if eq .Path "/admin"}}class="selected"{{end}}>Dashboard</a>
 		<a href="/admin/settings" {{if eq .Path "/admin/settings"}}class="selected"{{end}}>Settings</a>
 		{{if not .SingleUser}}
 		<a href="/admin/users" {{if eq .Path "/admin/users"}}class="selected"{{end}}>Users</a>
 		<a href="/admin/pages" {{if eq .Path "/admin/pages"}}class="selected"{{end}}>Pages</a>
 		{{if .UpdateChecks}}<a href="/admin/updates" {{if eq .Path "/admin/updates"}}class="selected"{{end}}>Updates{{if .UpdateAvailable}}<span class="blip">!</span>{{end}}</a>{{end}}
 		{{end}}
 		{{if not .Forest}}
 		<a href="/admin/monitor" {{if eq .Path "/admin/monitor"}}class="selected"{{end}}>Monitor</a>
 		{{end}}
 	</nav>
 </header>
 {{end}}