Hostgator coupons for up to 99% off hosting for Dynamic Drive visitors!
Advanced Search Usage Terms Submit Contact
Dynamic Drive CSS Library

CSS Library: Vertical CSS Menus: Here

Button Vertical Menu

Author: Dynamic Drive

By giving each menu link a ridge border with contrasting top/left and right/bottom background colors, the result is a slightly beveled button menu.


The CSS:


Code Info

Rate this code:

Date Posted: 04/30/2006

Revision History: None

Usage Terms: Click here

Your Comments (24)

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 3 of 3 pages  <  1 2 3

Hi Haim,

I have this simple setup:

on testPage you may select Page 1, the item goes orange as designed but just for a moment and then, when Page1 opens, the item's color is back same as all other list items.
It is not in its to-be-changed color or therwise seem as selected item to tell the visitors which page they are on.

buttonmenu.css keeps simple and contains the following:

list-style-type: none;
margin: 0;
padding: 0;
width: 260px;
font-family: Verdana;
font-size: 8.5pt;

.verticalmenu li a{
color: #D3D3A9;
display: block;
width: 100%;
padding: 0px 4px 0px;
font-size: 9pt;
text-decoration: none;
text-align: left;
font-weight: bold;
border: 1px solid;
border-color:#D5BFD0 #5A3A54 #5A3A54 #D5BFD0;

.verticalmenu li a:visited{
font-size: 9pt;

.verticalmenu li a:hover{
color: blue;
font-size: 9.5pt;
text-decoration: underline;
background-color: orange;

.verticalmenu li a:active{
color: orange;
font-size: 9.5pt;
text-decoration: none;
background-color: #23450E;
Posted by sergey on 05/04, 01:06 AM
FYI, I got the bullets to disappear in fire fox by adding this to my style sheet:

.buttonmenu li{
Posted by T on 05/04, 09:55 PM
Beautiful! Thank you!!!
Posted by jean on 05/10, 05:12 AM
Thanks for tips
Posted by Edy on 03/15, 09:12 AM

Comment Pages 3 of 3 pages  <  1 2 3

Commenting is not available in this weblog entry.
Copyright 2006-2015 Dynamic Drive Read our Usage Terms before using any of the CSS codes.