Creating a simple CSS menu

CSS can work wonders, normally making a good CSS menu would require images and sometimes jQuery. But to really decrease the HTTP requests on your website, a “pure” CSS and HTML menu is good for these reasons:

Very low in file size

Easily customisable

No images, or javascript

The possibilities are endless

Functional in most web browsers

Let’s start with styling the ul and li tags in CSS.

ul {
margin: 20px 10px;
}

ul li {
float: left;
list-style-type: none;
}

That’s going to be the base of our menu.

Now we’re editing all the a tags in this ul:

ul li a {
background: #0094ff;
color: white;
display: block;
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: bold;
text-transform: normal;
letter-spacing: -2px;
line-height: 1.2em;
padding: 10px 20px;
text-decoration: none;
}

Now we’re adding an hover effect:

ul li a:hover {
background: #0001ff;
text-decoration: underline;
}

All together:
ul {
margin: 20px 10px;
}

ul li {
float: left;
list-style-type: none;
}

ul li a {
background: #0094ff;
color: white;
display: block;
font-family: Helvetica, Arial, sans-serif;
font-size: 18px;
font-style: normal;
font-weight: bold;
text-transform: normal;
letter-spacing: -2px;
line-height: 1.2em;
padding: 10px 20px;
text-decoration: none;
}

ul li a:hover {
background: #0001ff;
text-decoration: underline;
}

Now we have to add some HTML:

Home
Services
Features
Blog
Contact

This is my personalized version of the menu, do you think your customization looks good? Then post a link to it below and i’ll reveal the winner in my next article

(The winner wins an imaginary cookie), and an honorable mention in my next post!

You can customise so much in this menu, have fun!

Live Demo

Arjun
http://www.avn8.com

With testking 70-642 tutorial, learn how to add and remove small object to create simple css menu. We offer expert testking 640-822 guide and testking 70-649 tutorials to learn useful web applications.

LusterForever.com – Cool silver charms and leather bracelets design! Totally awesome sterling silver bracelets.

Related posts:

1. Create a Glossy CSS Menu Menus are a very important part of contemporary web design,...
2. Create a Simple Javascript Clock When you think “time” for a website, you automatically think...

9 Responses to “Creating a simple CSS menu”

1. George Birbilis says:

   April 28, 2010 at 6:43 pm

   where’s the demo link?
2. Oliver says:

   April 29, 2010 at 10:17 am

   No :focus ??
3. arjun says:

   April 29, 2010 at 12:29 pm

   The demo link is just below “You can customise so much in this menu, have fun!”

   In bold it says “Live Demo”
4. Shane Jeffers says:

   April 29, 2010 at 12:58 pm

   Hey Ben,

   Just an FYI… There is no need to add a class to every anchor tag in this situation. All you would need to do is give the UL an ID and then effect the anchor tags like so.

   #menu li a { code goes here; }

   This is more semantic IMO. Oh and I would reccomend posting the HTML also and not just the CSS. But cool idea
5. Blair Orser says:

   April 30, 2010 at 3:25 pm

   Great post, very informative. Have learned a lot from your site….
6. Ingrid Kast Fuller says:

   May 1, 2010 at 3:29 am

   I like the fact you mentioned ‘decrease the HTTP requests’ and the benefits of using this type of CSS coding for navigation. More and more people will need to speed up their websites and will need to use tips like this. We use this method quite frequently.
7. Adam says:

   May 10, 2010 at 11:27 am

   The text does seems a little too close but nice and yam! (yet another menu)
8. Wedding Magician says:

   May 28, 2010 at 1:14 pm

   Great Tutorial, I will try this out later.

   Roger
9. G.N.R.S.U says:

   June 9, 2011 at 4:27 am

   The demo link ?