Your work is going to fill a large part of your life, and the only way to be truly satisfied is to do what you believe is great work. And the only way to do great work is to love what you do. If you haven’t found it yet, keep looking. Don’t settle. As with all matters of the heart, you’ll know when you find it. And, like any great relationship, it just gets better and better as the years roll on. So keep looking until you find it. Don’t settle.

Today I’m going to recreate the Smashing Magazine header and show you how to code it.

As I mentioned, the whole design is responsive, so I’m going to create the version of the menu that’s seen by users of medium sized monitors.

The HTML

We’ll start off by building our HTML.

Firstly I’ve created a wrapper div that’s going to be centred on the page.

<div id="wrap">

</div>

Then we’ll insert the Smashing Magazine logo onto the page.

<div id="wrap">

<a href=""><img id="logo" src="img/logo.png" alt="Smashing Magazine" width="165" height="80"/></a>

</div>

Then we need to create our navigation menu using a simple unordered list.

<div id="wrap">

	<a href=""><img id="logo" src="img/logo.png" alt="Smashing Magazine" width="165" height="80"/></a>

	<ul id="nav">
		<li><a href="">Network</a></li>
		<li><a href="">Shop</a></li>
		<li><a href="">Job Board</a></li>
		<li><a href="">Directory</a></li>
	</ul><!-- #nav-->

</div>

The CSS

Now we need to start on our CSS.

We’re going to make our wrapper div 960px wide and center it using the old centering trick of margin: 0 auto.

#wrap{
	width: 960px;
	margin: 0 auto;
	background:#fff;
}

Then to make the logo sit to the left of the navigation menu we’re going to give it a width and float it to the left.

#logo {
	width:165px;
	float:left;
}

Now we’ll need to go ahead and style the unordered list. We’re going to float this to the left also, so it snuggles up to the logo.

We’ll need to put a border on the left and bottom edges. The background colour will need to be defined and also the width needs to be set.

This is what we end up with.

ul#nav {
	list-style: none;
	float: left;
	border-left:1px solid #ddd;
	border-bottom:1px solid #ddd;
	width:794px;
	background: #f3f3f3;
}

Now that we’ve styled the ul value, we need to do something with the li value. This one is a bit simpler. It just needs floating to the left and given a border on its right edge.

ul#nav li {
	float: left;
	border-right: 1px solid #ddd;
}

The li a value is where the magic happens. To give us the solid background colour and make the whole area clickable, we’re going to use display:block.

It needs padding all around, but moreso at the top so that the links sit nicely near the bottom.

We’ll also set the colour, remove the default text-decoration and give it a background colour.

ul#nav li a {
	float: left;
	display: block;
	padding: 45px 15px 10px 15px;
	color: #999;
	height:24px;
	text-decoration: none;
	font-size:16px;
	background:#f1f1f1;
}

And last but not least we need to set the hover state which is as simple as changing the colour and background colour.

ul#nav li a:hover {
	background: #ffff66;
	color:#666;
}

And that’s that. Simple wasn’t it?

View Demo