diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css
index fba31121..68d8b19f 100644
--- a/copyparty/web/browser.css
+++ b/copyparty/web/browser.css
@@ -750,6 +750,9 @@ input.eq_gain {
 	background: #fc4;
 	text-shadow: none;
 }
+#tree ul a.par {
+	color: #fff;
+}
 #tree ul a {
 	border-radius: .3em;
 	display: inline-block;
@@ -772,7 +775,7 @@ html.light #tree.nowrap .ntree a+a:hover {
 	color: #000;
 }
 #docul a:hover,
-.ntree a+a:hover {
+#tree .ntree a+a:hover {
 	background: #181818;
 	color: #fff;
 }
@@ -1223,6 +1226,9 @@ html.light #tree ul a.hl {
 	background: #07a;
 	color: #fff;
 }
+html.light #tree ul a.par {
+	color: #000;
+}
 html.light #tree ul a.hl:hover {
 	background: #059;
 }
diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js
index 87acbb51..3bef2b8b 100644
--- a/copyparty/web/browser.js
+++ b/copyparty/web/browser.js
@@ -199,7 +199,7 @@ ebi('tree').innerHTML = (
 	'	<a href="#" class="tgl btn" id="wraptree" tt="word wrap">↵</a>\n' +
 	'	<a href="#" class="tgl btn" id="hovertree" tt="reveal overflowing lines on hover$N( breaks scrolling unless mouse $N&nbsp; cursor is in the left gutter )">👀</a>\n' +
 	'</div>\n' +
-	'<ul class="ntree" id="docul"></ul>\n' +
+	'<ul id="docul"></ul>\n' +
 	'<ul class="ntree" id="treepar"></ul>\n' +
 	'<ul class="ntree" id="treeul"></ul>\n' +
 	'<div id="thx_ff">&nbsp;</div>'
@@ -3571,11 +3571,18 @@ var treectl = (function () {
 			act = null;
 
 		for (var a = 0, aa = links.length; a < aa; a++) {
-			var href = uricom_dec(links[a].getAttribute('href'))[0];
-			if (href == cdir)
-				act = links[a];
+			var href = uricom_dec(links[a].getAttribute('href'))[0],
+				cl = '';
 
-			links[a].setAttribute('class', href == cdir ? 'hl' : '');
+			if (href == cdir) {
+				act = links[a];
+				cl = 'hl';
+			}
+			else if (cdir.startsWith(href)) {
+				cl = 'par';
+			}
+
+			links[a].setAttribute('class', cl);
 			links[a].onclick = treego;
 			links[a].onmouseenter = nowrap ? menter : null;
 			links[a].onmouseleave = nowrap ? mleave : null;