pre, code, kbd, samp, tt, textarea{
	font-family: monospace, monospace;
}

However, in Chrome, this threw off the line height, which ruined the vertical rhythm I was working to create. After some trial and error, I discovered that setting the vertical-align property to “top” took care of the problem. I’ll be the first to admit that this isn’t the most elegant solution, but as far as I can tell, it works in every modern browser. Here is my final code:

pre, code, kbd, samp, tt, textarea{
	font-family: monospace, monospace;
	vertical-align: top;
}

Please let me know if you find any browsers that don’t render this properly. Thanks!

Here is the HTML:

<div id="nav-primary">
	<ul>
		<li><a href="#">About</a></li>
		<li><a href="#">Level 1</a>
			<ul>
				<li><a href="#">Level 2</a></li>
				<li><a href="#">More Level 2</a>
					<ul>
						<li><a href="#">Level 3</a></li>
						<li><a href="#">More Level 3</a></li>
					</ul>
				</li>
				<li><a href="#">More Level 2 Again</a>
					<ul>
						<li><a href="#">Other Level 3</a></li>
						<li><a href="#">Other Level 3 Again</a></li>
					</ul>
				</li>
			</ul>
		</li>
		<li><a href="#">Lorem Ipsum</a></li>
	</ul>
</div>

As you can see, the HTML is just a simple list based menu structure. Each sub-menu is contained within the list item of the parent. This is required for hover states to work properly.

The CSS is nearly as simple as the HTML:

#nav-primary{
	background: #444;
	height: 40px;
}

#nav-primary ul{
	background: #444;
	list-style: none;
	margin: 0;
	padding: 0;
}

#nav-primary li{
	float: left;
	position:relative;
}

#nav-primary a{
	color: #fff;
	display: block;
	height: 40px;
	line-height: 40px;
	padding: 0 10px;
	text-decoration: none;
}

#nav-primary a:hover{
	background: #555;
}

#nav-primary ul ul{
	display:none;
	position: absolute;
	top: 40px;
	left: 0;
	width: auto;
}

#nav-primary ul ul li{
	width: 200px;
}

#nav-primary ul li:hover > ul {
	display: block;
}

#nav-primary ul ul ul {
	left: 100%;
	top: 0;
}

I have tested this menu with IE 7 and 8, Firefox 7, Chrome 14, Opera 11, and Safari 5.

Outline is a seldom used and often misunderstood CSS property. An outline is a line that is drawn around an element outside of it’s border. By definition, it takes up no space. Sounds impossible, right? In reality, it does take up space (you can see it!) however, that space is not added to the width of the element like a border would be.

Most often, the outline is used to highlight an active link. By default this is a small dotted line that encapsulates the link. To be honest, as a designer I have often found the outline to be a bit ugly. There are some designers who hide the outline entirely (I used to be one of them). However, in Firefox, Internet Explorer and Chrome you can navigate the web using only the keyboard by tabbing through the links on each page. Each link is highlighted by an outline when you reach it. You can hit enter to follow the link. Hiding the outline entirely takes that feature away from users who prefer to use their keyboards. So to prevent the ugly outline while still retaining keyboard navigation we can style the outline using CSS.

This solution is not perfect, due to the lack of support by Internet Explorer (as of version 7). While Internet Explorer uses an outline to highlight links, it does not support styling it will CSS. Firefox, Safari, Opera and Chrome on the other hand, do allow you to specify your own styles.

The outline can be styled with the following properties:

• outline-color
• outline-style
• outline-width
• outline

Outline-color behaves like any other color declaration and also supports the value “invert” which performs a color inversion of the pixels on the screen. This is the default behavior and ensures that the outline will stand out from the background. Outline color can be set like this:

a{outline-color: white;}

Outline-style has the same possible values as the more common property border-style and is set like this:

a{outline-style: dashed;}

Outline-width can be set to thin, medium, thick, or can be specified with a length such as 3px.

a{outline-width: 1px;}

Finally, outline is a shorthand property for setting the previous three properties all at once. For example:

a{outline:2px solid red;}

Keep in mind an outline is the same on all sides. Unlike border, you cannot specify a style for only one side of an outline. To play around with the outline property, visit http://www.w3schools.com/CSS/tryit.asp?filename=trycss_outline

For even more information:

• Don’t remove the outline from links – arjaneising.nl
• Removing the dotted line – csstricks.com
• The outline CSS property – sitepoint.com