Styling menu elements as buttons or menus

Generation of HTML is one thing, but styling is entirely another. As long as the HTML is semantically correct, we should be able to make it look like whatever we need it to. Without styling, the menu to the left appears like this (if you don't have edit permissions, the links for edit, add, cancel, delete and managing attachments will be missing):

The unstyled menu is still functional, but does not display as well as the styled one.

We would like to style menu items either as buttons, or as clickable menu items. Sometimes we even want to mix the two. The following stylesheet is what makes a set of divs, anchors and list items look like proper buttons and menus as may be seen to the left:

/* Styling menu items as buttons */
ul.menu >li {
	display:block;
	width:auto;
	list-style: none;
	line-height: 1.2em;
    background-color: #c0c0d0;
    margin:auto;
}

ul.menu >li.nav {
    background:transparent;
    background-color: lightgray;
}

div.buttons {
	padding:3px;
	margin:3px auto;
	text-shadow: 0px 1px 1px #ABA99E;
}

ul.menu {
	border:1px solid gray;
	border-top-color:darkgray;
	border-left-color:darkgray;
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;

	display:block;
	width: auto;
	color: black;
	margin:-2px;
	padding:2px;
	margin:10px 5px;

    padding:3px;
	text-align:center;
    overflow:hidden;
	text-shadow: 0px 1px 1px #ABA99E;
}

ul.menu  > li > a {
    display:block;
    padding:3px;
    text-decoration:none;
    color:navy;
}

ul.menu  > li > a:hover {
    font-weight:bold;
}

div.buttons > a, ul.menu > li.buttons > a {
    -webkit-border-radius: 5px;
    -khtml-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    border-radius: 5px;

	border:1px solid gray;
	border-top-color:darkgray;
	border-left-color:darkgray;
	background-color: #EAFAEA;
	cursor:pointer;

	margin: auto;
    padding:1px 0.5em;
    min-height:1.4em;
    line-height:1.2em;
    overflow:hidden;

    font-weight:normal;
    text-decoration:none;

    color:navy;
}

div.buttons > a, ul.menu > li.buttons > a {
	background-color: #daeada;
	filter: progid:DXImageTransform.Microsoft.gradient(endColorstr='#CADACA', 
                                       startColorstr='#EAFFEA'); /* for IE 6, 7*/
	ms-filter: "progid:DXImageTransform.Microsoft.gradient(endColorstr='#CADACA', 
                                      startColorstr='#EAFFEA'')"; /* for IE 8,9*/
    background-image: -moz-linear-gradient(bottom, #CADACA, #EAFFEA);
    background-image: -webkit-linear-gradient(bottom, #CADACA, #EAFFEA);
    background-image: -ms-linear-gradient(bottom, #CADACA, #EAFFEA);
    background-image: -o-linear-gradient(bottom, #CADACA, #EAFFEA);
    background-image: linear-gradient(bottom, #CADACA, #EAFFEA);
}

div.buttons > a:hover, ul.menu > li.buttons > a:hover {
	background-color: #CAFACA;
	cursor:pointer;
	filter: progid:DXImageTransform.Microsoft.gradient(endColorstr='#AAEAAA', '
                                      startColorstr='#CAFACA'); /* for IE 6, 7 */
	ms-filter: "progid:DXImageTransform.Microsoft.gradient(endColorstr='#AAEAAA', 
                                        startColorstr='#CAFACA')"; /* for IE 8, 9 */
    background-image: -moz-linear-gradient(bottom, #AAEAAA, #CAFACA);
    background-image: -webkit-linear-gradient(bottom, #AAEAAA, #CAFACA);
    background-image: -ms-linear-gradient(bottom, #AAEAAA, #CAFACA);
    background-image: -o-linear-gradient(bottom, #AAEAAA, #CAFACA);
    background-image: linear-gradient(bottom, #AAEAAA, #CAFACA);
}

ul.menu > li.buttons > a > img {
	display:block; 
	float:left; 
	height:20px;
}

menubuttons.css

Grok 4 Noobs

Styling menu elements as buttons or menus

*Username
*Password