diff --git a/demos/accordion/index.html b/demos/accordion/index.html
index 58f54d810..f43a4f34d 100644
--- a/demos/accordion/index.html
+++ b/demos/accordion/index.html
@@ -5,7 +5,7 @@
 	<link type="text/css" href="../demos.css" rel="stylesheet" />
 </head>
 <body>
-	<div id="container">
+	<div class="demos-nav">
 		<h4>Accordion</h4>
 		<ul>
 			<li class="demo-config-on"><a href="default.html">Basic accordion (default)</a></li>
diff --git a/demos/datepicker/index.html b/demos/datepicker/index.html
index 0da4d4ba5..14e8a1891 100644
--- a/demos/datepicker/index.html
+++ b/demos/datepicker/index.html
@@ -6,14 +6,16 @@
 </head>
 <body>
 
-<dl class="demos-nav">
-	<dt>Datepicker</dt>
-		<dd><a href="default.html">Default datepicker</a></dd>
-		<dd><a href="dropdown_month_year.html">Month & year menus</a></dd>
-		<dd><a href="buttonbar.html">Today & Done button bar</a></dd>
-		<dd><a href="multiple_calendars.html">3 month view</a></dd>
-		<dd><a href="inline.html">Inline datepicker</a></dd>
-</dl>
+<div class="demos-nav">
+	<h4>Datepicker</h4>
+	<ul>
+		<li><a href="default.html">Default datepicker</a></li>
+		<li><a href="dropdown_month_year.html">Month & year menus</a></li>
+		<li><a href="buttonbar.html">Today & Done button bar</a></li>
+		<li><a href="multiple_calendars.html">3 month view</a></li>
+		<li><a href="inline.html">Inline datepicker</a></li>
+	</ul>
+</div>
 
 </body>
 </html>
diff --git a/demos/demos.css b/demos/demos.css
index a5f1ed61b..923c91b4f 100644
--- a/demos/demos.css
+++ b/demos/demos.css
@@ -64,7 +64,7 @@ body {
 
 /* Demos */
 
-.demos-nav, .demos-nav dt, .demos-nav dd {
+.demos-nav, .demos-nav dt, .demos-nav dd, .demos-nav ul, .demos-nav li {
 	margin: 0;
 	padding: 0
 }
@@ -75,7 +75,8 @@ body {
 	font-size: 1.3em;
 }
 
-.demos-nav dt {
+.demos-nav dt,
+.demos-nav h4 {
 	margin: 0;
 	padding: 0;
 	letter-spacing: 0.75pt;
@@ -83,13 +84,15 @@ body {
 	color: #e87b10;
 }
 
-.demos-nav dt {
+.demos-nav dt,
+.demos-nav h4 {
 	margin-top: 1.5em;
 	margin-bottom: 0.7em;
 	line-height: 1.2em;
 }
 
-.demos-nav dd a {
+.demos-nav dd a,
+.demos-nav li a {
 	border-bottom: 1px solid #F4F4F4;
 	display:block;
 	padding: 3px 3px 3px 12px;
@@ -100,7 +103,9 @@ body {
 }
 
 .demos-nav dd a:hover,
-.demos-nav dd a:focus {
+.demos-nav dd a:focus,
+.demos-nav li a:hover,
+.demos-nav li a:focus {
 	background: #EAEAEA;
 	border-color: #BBBBBB;
 }
@@ -120,7 +125,7 @@ eventually we should convert the font sizes to ems -- using px for now to minimi
 
 #demo-frame { float:left; width:520px; height:300px; border:1px solid #ddd; }
 
-#demo-config-menu { float:right; width:150px; }
+#demo-config-menu { float:right; width:200px; }
 #demo-config-menu h4 { font-size:13px; color:#666; font-weight:normal; border:0; padding-left:18px; }
 
 #demo-config-menu ul { list-style: none; padding: 0; margin: 0; }
diff --git a/demos/index.html b/demos/index.html
index e26cc48c3..8a0626910 100644
--- a/demos/index.html
+++ b/demos/index.html
@@ -30,7 +30,7 @@
 				.find('#demo-config')
 					.append('<iframe id="demo-frame" name="demo-frame" width="520" height="314" scrolling="auto" frameborder="0" src="'+ section +'/default.html"></iframe><div id="demo-config-menu"></div>')
 					.find('#demo-config-menu')
-						.load(this.href + ' #container', function(){
+						.load(this.href + ' .demos-nav', function(){
 							$('#demo-config-menu a').each(function(){
 								this.setAttribute('href', section + '/' + this.getAttribute('href'));
 								$(this).attr('target', 'demo-frame');
