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;


<div id="button">
<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>

Comments (33)

I think this menu is really neat! :)

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

Simply Excellent!

#2: Juli�n Andr�s Tejada on 02/02 at 05:47 PM

menu is great!

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

How can we get it on a horizontal level?

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

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

#5: Billy on 05/17 at 12:50 AM

This one is great :)

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

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 08:08 PM

Great menu.

#8: NeboN on 07/18 at 04:22 PM

this is cool!

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

just what i was looking for!

#10: Wanthaza on 10/28 at 01:40 PM
Commenting is not available in this weblog entry.

Partners & ResourcesOur

CSS Forums News

Dynamic Drive forums | Register

The Latest Comments

All images and content copyright © 2017 CSS Drive. Contact Info | Back to Top
Affiliate Discloser: We receive a commission from purchases through some links on this site