HTML / CSS Horizontal Menu With Text Buttons

Share

• Tweet
• Email
• Sharebar

• Tweet
• Email

This short tutorial is to show the horizontal alternative of the vertical menu discussed earlier.  I’ll be using the same files, and just modifying its stylesheet a bit.  The objective is to create an horizontal text button menu from the codes we composed earlier.

One of the first few changes that should be done is to remove the:

display: block;

from the style of the unordered list items.  Then add the following lines to the stylesheet:

ul#menu li {
	display: inline-block;
}

This should place all the buttons horizontally.  Left and right padding now plays a vital role in keeping set distances between the buttons’ sides and the inner text.

Here are a few changes made in order to obtain the horizontal menu below:

#navmenu {
	font-size: 12px;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	margin: 0 auto;
}

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

ul#menu li {
	display: inline-block;
}

ul#menu li a {
	background: #CCCCCC;
	color: #FFFFFF;
	border-left: #999999 solid 1px;
	border-right: #999999 solid 1px;
	border-bottom: #999999 solid 1px;
	border-top: #666666 solid 1px;
	padding: 3px 20px 2px 20px;
	text-decoration: none;
}

ul#menu li a:hover {
	border: 1px solid #333333;
	background: #FFFFFF;
	color: #999999;
}

Your menu should now look similar to the one below:

Horizontal Menu + Hover

[DOWNLOAD THIS EXAMPLE | FILESIZE: 1.2Kb ]

Related posts:

1. HTML / CSS Vertical Menu Text With Text Buttons
2. Linking Your HTML Page With Stylesheet
3. Gmail Allows You To Trace Email Source
4. How To Create Custom-Shaped Pictures On Photoshop
5. Driving Theory Test Tomorrow!