CSS Horizontal Navigation Menu

CSS Horizontal Navigation Menu is the basic menu sent on most of the websites just below the  logo. It is very easy to create this type of menu using HTML unordered lists and CSS. It is search engine friendly and uses a tableless design. The CSS Horizontal Menu will be created with a hover effect to spice up things. This will change the color and style of a menu item when the mouse pointer is moved over it. Lets start step-by-step building the CSS Horizontal Menu

Creating a CSS Horizontal Menu

Using the HTML <ul> tag create an unordered list of items for you menu. All items should be hyperlinks pointing to their respective pages.

<ul id="menu">
<li><a href="index.html">Home</a></li>
<li><a href="services.html">Services</a></li>
<li><a href="careers.html">Careers</a></li>
<li><a href="about-us.html">About Us</a></li>
<li><a href="contact-us.html">Contact Us</a></li>
</ul>

The ID attribute is added to the ul tag so that CSS ID selector can be used to apply styles. When this HTML file is opened in a web browser you’ll see bullets before each menu item. The next step is to remove it using CSS. Our aim is to remove the bullets, remove the indented space and make it horizontal. Add the following code inside the head tag.

<style type="text/css">
ul#menu {
list-style-type: none;
padding: 0;
margin: 0;
}
ul#menu li {
display: inline;
}
</style>

The list-style-type: none will remove the bullet style and padding: 0 will set the space between the list and left side to zero. The li elements are block elements which means each element takes up one full line. To make them all appear in one single line display:inline is used. The menu items must now be spaced out. For this the padding attribute if the a tag will be modified.

ul#menu a {
padding: 4px 10px;
float: left;
}

The first value 4px sets the padding for the top and bottom, the 10px value is for left and right. These values can be modified according to your requirements. Now the menu has become horizontal and the items have been spaced out. The links look ugly in generic blue color. The following CSS code will modify the link text color and give it a background color.

ul#menu a {
padding: 4px 10px;
float: left;
color: #f0ffff;
background-color: grey;
text-decoration: none;
}

The text-decoration attribute is set to none to remove the underlining of the link text. The final touch is to add a hover effect for the menu items. Whenever the mouse pointer is moved over an item its color, style and background color must be changed. This is done using the pseudo class hover.

ul#menu a:hover {
color: #fffff0;
text-decoration: underline;
background-color: #000;
}

The demo of the entire code is available here. CSS Horizontal Menu