Dynamic Drive CSS Library- DD 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

DD Blue Blocks Menu

Author: Dynamic Drive

This is our rendition of a block looking vertical menu, inspired by the original Blue Blocks menu and based on the CSS used by the vertical menu of our sister site CSS Drive. It supports the insertion of menu headers to act as dividers between groups of menu links.

Demo:

Dynamic Drive

CSS Library

The CSS:

<style type="text/css">

#ddblueblockmenu{
border: 1px solid black;
border-bottom-width: 0;
width: 185px;
}

#ddblueblockmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font: normal 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

#ddblueblockmenu li a{
display: block;
padding: 3px 0;
padding-left: 9px;
width: 169px; /*185px minus all left/right paddings and margins*/
text-decoration: none;
color: white;
background-color: #2175bc;
border-bottom: 1px solid #90bade;
border-left: 7px solid #1958b7;
}

* html #ddblueblockmenu li a{ /*IE only */
width: 187px; /*IE 5*/
w\idth: 169px; /*185px minus all left/right paddings and margins*/
}

#ddblueblockmenu li a:hover {
background-color: #2586d7;
border-left-color: #1c64d1;
}

#ddblueblockmenu div.menutitle{
color: white;
border-bottom: 1px solid black;
padding: 1px 0;
padding-left: 5px;
background-color: black;
font: bold 90% 'Trebuchet MS', 'Lucida Grande', Arial, sans-serif;
}

</style>

The HTML:

<div id="ddblueblockmenu">

<div class="menutitle">Dynamic Drive</div>
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/new.htm">What's New</a></li>
<li><a href="http://www.dynamicdrive.com/revised.htm">What's Revised</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Help Forums</a></li>
</ul>

<div class="menutitle">CSS Library</div>
<ul>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image Effects</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form Effects</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">Boxes & containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/" style="border-bottom-color: black">Links & Buttons</a></li>
</ul>

</div>

Code Info

Rate this code:

Date Posted: 05/07/2006

Revision History: None

Usage Terms: Click here

Your Comments (34)

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

This is my favorite vertical menu on the site, my opinion of course. Simple yet sweeet.

Posted by Kris on 09/15, 09:10 AM

I have been using one of your styles for the last year and love it ... I am back to re-fresh my site with another design ... thanks

Posted by Aubrey Clark on 09/16, 09:02 PM

DD Blue Blocks Menu works fine under firefox. But when i run it on the IE, gaps appear as a space(white space)under each list item,but this problem doesn't appear in your demo(this page) Please check out the URL
Thanks in anticipation
Dave

Posted by David Pickles on 11/23, 10:36 PM

(white space)under each list in IE but Firefox ok

Posted by David Pickles on 11/25, 02:59 PM

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