How to create a horizontal menu in HTML and CSS?

[Ben Stones]

Creating horizontal menus are really easy in CSS. The example below is a more advanced menu because I've added additional CSS effects like gradients on the background and drop shadow on the text.



The CSS code:

body
{
	margin: 0;
	color: #000000;
	font-family: 'Titillium Web';
}

a:link, a:visited
{
	color: #ffffff;
	text-decoration: none;
}

p a:link, p a:visited
{
	color: #000000;
	text-decoration: none;
	font-weight: bold;
}

p a:hover
{
	text-decoration: underline;
}

h1
{
	font-size: 60px;
	font-weight: bold;
	color: #232323;
	text-shadow: 0px 2px 1px #000;
	text-align: center;
	margin: 0;
	text-transform: uppercase;
}

p
{
	text-align: center;
	margin: 10px;
}

#menu
{
	width: auto;
	height: 35px;
	margin: 10px 0 0 0;
	padding: 10px 0 0px 0;
	background-color: #e77035;
	background-image: -moz-linear-gradient(bottom, #e77035, #e15612);
	background-image: -o-linear-gradient(bottom, #e77035, #e15612);
	background-image: -ms-linear-gradient(bottom, #e77035, #e15612);
	background-image: -webkit-linear-gradient(bottom, #e77035, #e15612);
	border-top: 2px solid #a63700;
	border-bottom: 2px solid #a63700;
	position: relative;
}

#menu-list
{
	float: left;
	margin-left: 10px;
}

#menu-list ul
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#menu-list ul li
{
	list-style-type: none;
	float: left;
	text-align: center;
	text-shadow: 1px 1px #802a00;
	background-color: #c84200;
	background-image: -moz-linear-gradient(top, #c84200, #a73700);
	background-image: -o-linear-gradient(top, #c84200, #a73700);
	background-image: -ms-linear-gradient(top, #c84200, #a73700);
	background-image: -webkit-linear-gradient(top, #c84200, #a73700);
	margin: 0 10px 0 0;
	padding: 0;
	min-width: 200px;
	height: 36px;
}

#menu-list ul li#last
{
	margin-right: 0;
}

#menu-list ul li a
{
	display: block;
	padding-top: 6px;
	height: 30px;
}

#menu-list ul li:hover
{
	background-color: #9f3400;
	background-image: -moz-linear-gradient(bottom, #c84200, #ba3d00);
	background-image: -o-linear-gradient(bottom, #c84200, #ba3d00);
	background-image: -ms-linear-gradient(bottom, #c84200, #ba3d00);
	background-image: -webkit-linear-gradient(bottom, #c84200, #ba3d00);
}

The HTML code:

<h1>Menu Tutorial</h1>

<p><a href="http://www.eukhost.com"><img src="http://www.eukhost.com/images/forums/eukhost-logo.png" style="border: 0" alt="eUKhost logo" /></a></p>

<p><strong>License information:</strong></p>

<p>The design and the accomponying source code is released under the terms of the <a href="http://www.gnu.org/licenses/gpl.html">GNU General Public License</a> and is copyrighted to <a href="http://www.b3ns.com">Ben Stones</a>. You may use, distribute, make copies of and make other works from, any of the source code from this document free of charge without requiring permission from the copyright holder first, under the terms and rights explained in the GNU General Public License v3 that is hyperlinked to above.</p>

<p>If you find this useful for your website, I'd appreciate a link-back to my personal website, but there is no mandatory requirement for you to do this. It's entirely at your choice.</p>

<div id="menu">
	<div id="menu-list">
		<ul>
			<li><a href="#">Hello world</a></li>
			<li><a href="#">Hello world</a></li>
			<li id="last"><a href="#">Hello world</a></li>
		</ul>
	</div>
</div>

See full code

The main points of CSS code you need to be looking at are the following:

#menu-list ul
{
	list-style-type: none;
	margin: 0;
	padding: 0;
}

#menu-list ul li
{
	list-style-type: none;
	float: left;
	text-align: center;
	text-shadow: 1px 1px #802a00;
	background-color: #c84200;
	background-image: -moz-linear-gradient(top, #c84200, #a73700);
	background-image: -o-linear-gradient(top, #c84200, #a73700);
	background-image: -ms-linear-gradient(top, #c84200, #a73700);
	background-image: -webkit-linear-gradient(top, #c84200, #a73700);
	margin: 0 10px 0 0;
	padding: 0;
	min-width: 200px;
	height: 36px;
}

#menu-list ul li a
{
	display: block;
	padding-top: 6px;
	height: 30px;
}

The list-style-type: none property value prevents the ul and li HTML elements from doing their default behaviour - which is to display bullet points. The float: left property value in #menu-list ul li makes the <li> elements float left, creating a horizontal menu. The text-shadow property creates a drop shadow effect on the text in each menu item as you can see in the screenshot at the top of the post. The first value in the property is for the horizontal shadow, second for the vertical shadow and the third for the colour of the shadow.

The #menu-list ul li a ensures that as a link, the entire button area is clickable - not just the text inside the menu item. The padding-top ensures there is upper padding on the text so it looks like the text is centred vertically in the menu item.

With regards to the gradients, when you hover over the menu item (if you see the live example) the gradient essentially inverts. This is simply done by changing the first values from "top" to "bottom". Because the gradient CSS 3 properties are not yet standardised, each browser has their own proprietary properties for creating CSS gradients - most modern versions of Firefox, Chrome, Safari, Opera and Internet Explorer support CSS gradients. As expected, Internet Explorer is the latest to supporting many CSS 3 features like rounded corners, gradients, etc. Although there is no CSS code for supporting the gradients in Internet Explorer, the standard linear-gradient property (which, alongside other gradient-specific properties are currently a standards candidate recommendation) is supported in IE 10 and above only - with most users using IE 7, IE 8 and IE 9. In these versions of Internet Explorer, you can get gradients working using a proprietary Microsoft CSS property:

filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c84200', endColorstr='#a73700');

See which browers support the non-proprietary CSS gradient properties currently in candidate recommendation: http://caniuse.com/css-gradients

Hope this helps.