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 am using a variation of this at http://holliesdancindream.net it uses the main header as a background image though, which is positioned in the off/hover/active states. That way you only load the 1 image (the header background). It also uses the thick border technique. The navigation is an unordered list on the left of the page.
Jim Summer
Jacksonville Web Design
Jacksonville, FL USA

#1: TenTonJim on 02/18 at 03:51 PM

just great..!

#2: hayek on 05/05 at 08:33 PM

Im lovin this menu.

dog allergies

#3: James on 05/11 at 04:15 AM
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