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)

How can i add a submenu on this css menu.. Looks good but i need to add submenus

#1: Ismael on 11/16 at 02:37 PM

Here you have ( on cssdrive exaples ) 2 level css menu, just apply this menu style ....

Nice looking menu btw !

#2: nemanja on 11/25 at 04:24 PM

I have been working on a similar menu for a couple of days now and hit a brick wall. Thanks for the very slick menu, and a great way of pulling off the achieved goal I was looking for, in a very slick and compact code base.

Again, many thanks for the hints. :)

#3: Webgeek on 01/03 at 04:19 AM

this menu was written by someone else... the author is taking credit for someone elses work... git...

#4: S on 01/30 at 12:23 PM

Very good!! very good indeed.., great job

#5: majuranus on 02/20 at 01:41 AM

Is it possible to make this menu horizontal?

It's great.

#6: richard bloom on 03/03 at 09:43 AM

You menu is great and beauttful

#7: Amir Sherif on 03/25 at 12:20 AM

clean code, fast & great menu with excellent look & feel.
Thanks Mark.

#8: aadhunik on 06/11 at 12:21 AM

I love this menu - I am using a variation of it at a sute I am building for a friend of mine... http://www.youkitchens.com/

-Jim

#9: TenTonJim on 07/27 at 09:13 PM

Looking for more enhancements.

#10: Mag on 08/03 at 02:15 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