Create a pretty cool, simple, horizontal CSS menu

This is a beginner level tutorial to create a horizontal CSS menu. Many of the beginners are not aware how simple is to create a pure CSS menu. This tutorial helps to create a simple and attractive CSS menu with a cool hover effect. Check out the demo below..

First of all let us write HTML list for menu. Say we have 8 links, as shown in image, here goes the code.

<ul id=”button”>

<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Services</a></li>
<li><a href=”#”>Clients</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>F.A.Q</a></li>
<li><a href=”#”>Help</a></li>
<li><a href=”#”>Contact Us</a></li>

</ul>

CSS menu

Now, lets go the CSS part, We used only one ID name here to write CSS code. That is ‘button.’

#button {
padding: 0;
}

The CSS code above will remove the padding which will be there in default for list elements.

I am going to create a horizontal menu now, so lets make the list inline

#button li {
display: inline;
}

CSS menu

Okay, now lets make it look beautiful by adding some styles for anchor tag

#button li a {
font-family: Arial;
font-size:11px;
text-decoration: none;
float:left;
padding: 10px;
background-color: #2175bc;
color: #fff;
}

CSS menu

Lets make it more attractive by giving hover effects, we are here going to give a special hover effect ;)

#button li a:hover {
background-color: #2586d7;
margin-top:-2px;
padding-bottom:12px;
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s