More snazzy border menus

TAB DOWN

TAB UP

• item #1
• item #2
• item #3
• item #4
• item #5
• item #6
• item #7

Information

Menu tab down is based on the one I used for my previous site layout. I thought that I should reproduce it here so that it would not get forgotten and perhaps it may be of use to somebody.

The above menu has also been produced without the aid of images and should work in IE5.01 (static image), IE5.5, IE6, Opera 7.54, Mozilla 1.75, FF and NN 7.1. Also Mac Safari and IE5.

=======================

#outer {display:block; position:relative; background:#eee; padding:2em; text-align:center; margin:40px 15px;}
#outer h2 {margin-bottom:1em;}

#navigation {background:transparent; margin:0 auto; height:3em;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */ }

#navigation ul {margin:0; padding:0; list-style-type:none; background:transparent;}
#navigation li {display:block; float:left; margin:0 1px;}
.snazzy {background:transparent;}
.snazzy span {text-align:center; color:#fff; margin:0; font-weight:normal;}

.b1, .b2, .b3, .b4 {display:block; font-size:1px;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */ }
.b1, .b2, .b3 {height:1px;}
.b2, .b3, .b4 {border-left:1px solid #fff; border-right:1px solid #fff;}
.b1 {margin:0 5px; background:#fff;}
.b2 {margin:0 3px; border-width:0 2px;}
.b3 {margin:0 2px;}
.b4 {height:2px; margin:0 1px;}
.boxcontent {display:block; border-left:1px solid #fff; border-right:1px solid #fff;}

a.menu, a.menu:visited {display:block; text-decoration:none; width:5.5em;}
a.menu:hover {background:transparent; cursor:pointer;}
a.menu:hover span {padding-top:10px; background:#888;}
a:menu:hover b {background:#888;}

.red {background:#c00;}
.orange {background:#f90;}
.yellow {background:#b8b800;}
.green {background:#090;}
.blue {background:#00c;}
.indigo {background:#309;}
.violet {background:#c6c;}
.grey {background:#888;}

a:hover b.red {background:#888;}
a:hover b.orange {background:#888;}
a:hover b.yellow {background:#888;}
a:hover b.green {background:#888;}
a:hover b.blue {background:#888;}
a:hover b.indigo {background:#888;}
a:hover b.violet {background:#888;}

.active {padding-top:10px; background:#888; cursor:default;}

#navigation2 {clear:both; background:transparent; margin:0 auto; height:3em;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */ }

#navigation2 ul {margin:0; padding:0; list-style-type:none; background:transparent;}
#navigation2 li {display:block; float:left; margin:0 1px;}

.pad {display:block; height:1em;
/* hide overflow:hidden from IE5/Mac */
/* \*/
overflow: hidden;
/* */ }

a.menu2, a.menu2:visited {display:block; text-decoration:none; width:5.5em;}
a.menu2:hover {background:transparent; cursor:pointer;}
a.menu2:hover .boxcontent {padding-bottom:0.8em; background:#888;}
a.menu2:hover .pad {height:0.2em;}