Blue Blocks Menu - CSS Example

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>



Circle Hover Effects CSS3
Circle Hover Effects with CSS3 Transitions
Radial Blur
Create attractive effect from photoshop of your photo.
Draw a Mobile ΓΆ€“ Photoshop Tutorial
Draw a Realistic Samsung Galaxy S2. To follow this tutorial, you will need the following resources...
Clean and Stylish CSS3 Form
This article is about creating a form using some of CSS3 properties. You can easily customize the style.


Sign up to received our free newsletter!
E-mail ID:


Views: 6127 Times
Insert Images & Water marks word 2007 READ MORE
Views: 3162 Times
Google and Apple among hundreds hit in high-profile Pakistan hack READ MORE
Views: 2951 Times
Telefonica unveils data-based communication app Tu Me READ MORE
Views: 5722 Times
How to undelete files on Windows with Undela READ MORE
Views: 7900 Times
Create Smooth Bubbles (Photoshop) READ MORE

Home|IT News|Computer Tips|Video Tutorials|Download Softwares|Subjects|Contact Us
Copyright © 2019. Jumbo Education (Information Technology). All rights reserved.
Free counter and web stats

Large Visitor Globe