Creating Sub Navs with Dls & CSS

In this demo, we pair some basic CSS with a flexible HTML element, the dl, so we can create simple and effective on-page navigations. For the complete picture, be sure to read the blog post with this demo.

Our Default HTML

To start the demo, we need some basic HTML, shown below. It's a normal dl that includes a label (the dt) and links in each dd. Here's what it looks like with some basic styling:

On This Page:: Final Wireframes; Updated Wireframes; Initial Wireframes; Sketches

<dl>
	<dt>On This Page:</dt>
	<dd><a href="">Final Wireframes</a></dd>
	<dd><a href="">Updated Wireframes</a></dd>
	<dd><a href="">Initial Wireframes</a></dd>
	<dd><a href="">Sketches</a></dd>
</dl>

To achieve the intended effect, we've added two classes to the HTML. First is the class that we put on the dl, nav, which is the selector we'll use to apply the CSS. Second is the "active" state for our navigation; that gets applied to the selected dd.

<dl class="nav">
	<dt>...</dt>
	<dd class="active"><a href="">...</a></dd>
	<dd><a href="">...</a></dd>
</dl>

With the HTML in place, we move onto the CSS.

Applying the CSS

To style the dl, we'll float our dl children elements just like we would for our main navigation. This is the simplest way we've found to keep every browser happy.

dl.nav { display: block; width: auto; height: 27px; margin: 0 0 18px; }
dl.nav dt, dl.nav dd { float: left; display: inline; }
dl.nav dt { color: #999; font-weight: normal; }
dl.nav dd a { text-decoration: none; margin-left: 6px; padding: 5px 12px;
 -webkit-border-radius: 12px; -moz-border-radius: 12px; }
dl.nav dd a:hover { background: #eee; }
dl.nav dd.active a { background: #2daebf; color: #fff; }

And that's it, really. Just a few lines of CSS to turn a regular old dl into a sub nav. It'd likely take more code to do that with a ul or ol, and all three options are semantically acceptable.

The Final Product

And with just that basic HTML and CSS, we have our sub nav:

On This Page:: Final Wireframes; Updated Wireframes; Initial Wireframes; Sketches