Dynamic Drive CSS Library- Blue Blocks Menu

CSS Library

CSS Layouts

Web Graphics

Free Icons

Online Tools:

Website Templates

PSD to HTML

Web Templates

Website Hosting

HTML Editor

Social Media Applications

Advertise Here

CSS Library: Vertical CSS Menus: Here

Blue Blocks Menu

Author: Mark Newhouse- Taming Lists

This is an attractive "blocks" CSS menu with an accompanying hover effect. We added some changes of our own to the CSS to create a consistent menu width across browsers.

Demo:

The CSS:

<style type="text/css">

#blueblock{
width: 180px;
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;
}

* html #blueblock{ /*IE 6 only */
w\idth: 147px; /*Box model bug: 180px minus all left and right paddings for #blueblock */
}

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

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

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

html>body #blueblock li a{ /*Non IE6 width*/
width: auto;
}

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

</style>

The HTML:

<div id="blueblock">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com/">CSS Drive</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Creator</a></li>
<li><a href="http://tools.dynamicdrive.com/button/">Button Maker</a></li>
</ul>
</div>

Code Info

Rate this code:

Date Posted: 05/07/2006

Revision History: None

Usage Terms: Click here

Your Comments (39)

Got a question or need help customizing this CSS code? Post it in the CSS Forums. If you have a comment or suggestion instead, post it in the comments section below.

Comment Pages 4 of 4 pages « First < 2 3 4

New to CSS and this site has helped a lot!

Now, on this menu, how do I make the width of the blocks wider? I have tried various things but none I have tried work.

Thoughts anyone?

Posted by Paul Hurm on 01/01, 08:53 PM

It is Brilliant!!

Posted by Danish on 01/12, 05:24 AM

I have tried 2 of these examples and they work perfectly on IE. I cannot get this example or the other example I tried to work in Firefox though. All I get in FF is a bulletid list (for both examples).

Regards.
Deon

Posted by Deon on 04/30, 09:57 AM

Yes, I tried that to Deon. Anyone?

Posted by Ethan on 05/04, 05:43 AM

hi,
I tried this and when i included this in my page and when i am using a combo box below this menu combo box overrides it and it cuts the menu in the overlapping portion of combo box and menu. I gave z-index for menu as 100 and combo as -1 and yet i am not able to reslove it. Can you suggest me any solution to solve it or tell me where to put the z -index.

Posted by Balakrishnan on 05/28, 05:28 AM

Nice and clean css vertical menu. Like the colors, matches my site!

Posted by Ethan on 06/08, 04:09 AM

I love this, THANK YOU!!! I want the text on the main part of page to higher up on the screen. I guessing to get this towork I need to put the menu in a left frame. Is that cvorrect? Right now my text appears below my last link in the list.

Posted by Joaquin B on 07/09, 12:38 PM

THANKYOU!!

Posted by Evolved Templates on 07/10, 02:13 PM

wow that is nicee!!
Thank You
great post!

Posted by online fx trading on 07/19, 03:09 AM

Comment Pages 4 of 4 pages « First < 2 3 4