How To Build A Simple Tabbed Menu

In this tutorial we are going to take a PSD and turn them into HTML and CSS. I previously done this with other tutorials such as building a CSS pricing table.

In this tutorial you will learn how you can create a simple tabbed menu in CSS.

The style we are going to create is going to look this.

Build A Simple Tabbed Menu

View the demo to see it in action.

Demo

The HTML

We are going to use the HTML element list to display the menu and the drop down.

Each of the top level menus are in their own list items and the drop down menus are lists placed inside the list items.

<nav>
	<ul>
		<li><a href="">Home</a></li>
		<li><a href="">Community</a>
			<ul>
				<li><a href="">Recent Activity</a></li>
				<li><a href="">Member Forum</a></li>
				<li><a href="">Member List</a></li>
				<li><a href="">Member Groups</a></li>
			</ul>
		</li>
		<li><a href="">Pet Help</a>
			<ul>
				<li><a href="">Vets</a></li>
				<li><a href="">Hospital</a></li>
				<li><a href="">Insurance</a></li>
				<li><a href="">Service</a></li>
			</ul>
		</li>
		<li><a href="">Pets For Sale</a></li>
		<li><a href="">Pets Services</a></li>
	</ul>
</nav>

The CSS

First we need to style the nav tag which is what we are going to place everything inside.

nav {
     font-family: arial, sans-serif;
     position: relative;
     font-size:14px;
     color:#333;
     margin: 0px auto;
}

The nav tag needs to have a position of relative so that we can position the drop down menu under the list item.

nav ul {
     list-style-type: none;
     border-bottom:4px solid #FFF;
     margin: 0;
}

All the lists don't have any styling on them so we need to remove the styles on the list types. In the image above we have a white line to underline the menu, for this we add a bottom border to the list.

nav ul li {
     float: left;
     position: relative;
     top:-38px;
}

The top menu is going to be horizontal to create this style you need to add a float: left to the list items so it will run horizontal.

nav ul li a {
    text-align: center;
    padding:10px 25px;
    display:block;
    text-decoration:none;
    color:#FFF;
    font-weight:bold;
    text-shadow:-1px 0px 0px #bbb;
    margin:0px 1px;
    background: #d1dfe8;
    background: -moz-linear-gradient(top, #d1dfe8 0%, #98c1d3 44%, #8ab9cd 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d1dfe8), color-stop(44%,#98c1d3), color-stop(100%,#8ab9cd));
    background: -webkit-linear-gradient(top, #d1dfe8 0%,#98c1d3 44%,#8ab9cd 100%); 
    background: -o-linear-gradient(top, #d1dfe8 0%,#98c1d3 44%,#8ab9cd 100%); 
    background: -ms-linear-gradient(top, #d1dfe8 0%,#98c1d3 44%,#8ab9cd 100%); 
    background: linear-gradient(top, #d1dfe8 0%,#98c1d3 44%,#8ab9cd 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d1dfe8', endColorstr='#8ab9cd',GradientType=0 );
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    -moz-border-top-left-radius: 5px;
    -moz-border-top-right-radius: 5px;
    -webkit-border-top-left-radius: 5px;
    -webkit-border-top-right-radius: 5px;
}

The above is the CSS is what we are going to use for the menu items on the top menu. First we are going to center the text and add a padding to expand the width of the menu list item.

Then we use the new CSS3 feature of adding a gradient colour to the button and adding border radius to the top left and right corners of the menu item.

nav ul li:hover > a {
	background:#FFF;
	color:#333;
	text-shadow:none;
}

Add the above CSS to change the colour of the menu item on the hover event of the menu item.

nav ul li ul {
     display: none
}

We don't want to show the sub-menu on the screen until you hover over the top menu items so we start off by hiding the sub-menus.

nav ul li:hover ul {
     display: block;
     position: absolute;
     top:76px;
     left:-1px;
     padding:0;
     margin:0;
     width:auto;
     border:0;
}

We are hiding the sub-menu so now we can add the CSS to display the menu item when you hover over the menu item. To display the drop down menu you need to change the display to block. The position of the drop down menu will appear next to the menu item so we need to change the position by using the position: absolute property, now we can move the drop down by changing the top and left property.

The rest of the settings are turning off what we don't want from the top list item.

nav ul li:hover ul li a {
     display:block;
     background:#FFF;
     color:#333;
     text-align: center;
     border: 1px solid #999;
     border-top: none;
     border-radius: 0;
     -moz-border-radius: 0;
     -webkit-border-radius: 0;
     font-weight:normal;
     width:120px;
}

The above styling is the for the drop down list items, we need to remove the styling we gave to the a tag on the top menu.

nav ul li:hover ul li a:hover, nav ul li a:hover {
    background:#FFF;
    color:#333;
}

The above is changing the style of the a tag on the a hover event which will make sure that we change the background colour to white on the hover event.

That's all you need to create this drop down menu.

View the demo to see what it will create.

Demo

Advertise here 50% Off

Comment