Home

CSS Examples Mark’s Blue Blocks Menu

Date: 11/11/2004 Mark’s Blue Blocks Menu

Author: Mark Newhouse- Taming Lists

A very attractive "blocks" CSS menu with hover effect. In IE Win, the links (<a>) are set to a width of 100%, while in other browsers, it's set to auto, using child selectors (html>body #button li a). This conditional CSS is possible since IE Win (6 and below) doesn't support child selectors while other modern browsers do, and is necessary, since a definition of 100% trips up Mac versions of IE5 and Mozilla.

The CSS:

#button {
width: 150px;
border-right: 1px solid #000;
padding: 0 0 1em 0;
margin-bottom: 1em;
font-family: 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
font-size: 90%;
background-color: #90bade;
color: #333;
}

#button ul {
list-style: none;
margin: 0;
padding: 0;
border: none;
}

#button li {
border-bottom: 1px solid #90bade;
margin: 0;
}

#button li a {
display: block;
padding: 5px 5px 5px 0.5em;
border-left: 10px solid #1958b7;
border-right: 10px solid #508fc4;
background-color: #2175bc;
color: #fff;
text-decoration: none;
width: 100%;
}

html>body #button li a {
width: auto;
}

#button li a:hover {
border-left: 10px solid #1c64d1;
border-right: 10px solid #5ba3e0;
background-color: #2586d7;
color: #fff;
}

The HTML

<div id="button">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Toys and Games</a></li>
<li><a href="#">Computers</a></li>
<li><a href="#">Electronics</a></li>
<li><a href="#">Furniture</a></li>
<li><a href="#">Outdoors</a></li>
<li><a href="#">Home Appliances</a></li>
</ul>
</div>

Comments (33)

I think this menu is really neat! :)

#1: Mike Larry on 01/04 at 12:31 AM

Simply Excellent!

#2: Juli�n Andr�s Tejada on 02/02 at 10:47 AM

menu is great!

#3: yo on 02/08 at 02:58 PM

How can we get it on a horizontal level?

#4: Fahed on 02/12 at 01:39 PM

How to include another second submenu eg.
Under Furniture category, we have table, chair subcategory...Thanks.

#5: Billy on 05/16 at 06:50 PM

This one is great :)

#6: blog on 05/21 at 11:11 AM

How to Convert the whole thing to a horizontal menu then... sorta need that for a project I'd like to use this w/ as a sub-navigation horizontally on the page...
Thanks Cool

#7: Ty Gossman on 05/31 at 02:08 PM

Great menu.

#8: NeboN on 07/18 at 10:22 AM

this is cool!

#9: Mr Poo on 08/24 at 05:53 AM

just what i was looking for!

#10: Wanthaza on 10/28 at 07:40 AM


NewsUser
Privileges

Partners & ResourcesOur
Partners


CSS Forums News

Dynamic Drive forums | Register

All images and content copyright © 2004-2012 CSS Drive. Contact Info | Back to Top