How to create CSS Bevel horizontal Menu

Bevel horizontal menu can be used if you want to create a 3 state horizontal menu for a list of items. The attractive feature of this menu is the beveling effect of menu items. This effect appears when mouse is placed (hover) over the horizontal menu. It is supported by all major browsers but the appearance of depressed effect does not work in older browsers like IE6.
It is easy to manage the alignment of this menu by using its text-align attribute. Moreover, you can set its alignment to right, left and center without any difficulty. The bevel effect can be applied easily by setting outset attribute of border-style. In case of bevel menu, the mouse down inset effect works only in non IE browsers.
So, just paste the CSS and HTML code posted in this article and enjoy the clean and simple Bevel horizontal menu.

CSS

.bevelmenu {
font: bold 20px arial; /*Menu font size*/
padding: 6px 0;
margin: 0;
width: 100%;
background-color: #b3e3ff;
text-align: left; /*Set left, center or right alignment*/
}
.bevelmenu li {
list-style: none;
display: inline;
}
.bevelmenu li a {
padding: 3px 0.5em;
text-decoration: none;
color: black;
background-color: #b3e3ff;
border: 2px solid #b3e3ff;
}
.bevelmenu li a:hover {
color: black;
background-color: #39b7ff;
border-style: outset;
}
.bevelmenu li a:active {
/* Mousedown inset effect only for non IE */
border-style: inset;
}

HTML

<ul class="bevelmenu">
<li><a href=" ">WordPress</a></li>
<li><a href=" ">AdSense</a></li>
<li><a href="">CSS</a></li>
<li><a href="">Blogging</a></li>
<li><a href="">SEO</a></li>
</ul>

 

Some suggestions:
1) set a line-height, NEVER trust the default or inheritance as cross browser that can drive you nutters.

2) set all paddings in EM so it auto-scales to the text.

3) set the font size in %/em for the same reason.

4) set the anchors to display:inline-block otherwise your top/bottom padding is ignored from a layout perspective in SOME browsers.

5) You don't have any floats, you don't seem to need haslayout, UL is block level... so there's no reason to say width:100% on it.

6) in testing across browsers, empty href are sometimes ignored, it's better to at least put a null hash in there for testing purposes. href="#"

7) since A could never be a direct child of UL in valid markup, there's no reason to say "LI A" in the CSS.

8) camelCase would make the classes prettier... of course if the forum hadn't stripped your formatting as you didn't use the CODE bbCode...

Of course though, the big problem is your menu is just a flat bar with no hovers in Opera and Chrome... because of the non-standard border properties. Doesn't even work in IE9/later as like a lot of proprietary values, they've been dropped from IE!

Actually, hah! Outset and Inset were dropped as of IE 8... so your code is IE7- only! - not all that useful in 2013.

Though you could replicate the behavior with a few minor tricks and CSS3.

This:

/* assumes a reset is in use */

.bevelMenu {
	list-style:none;
	/* 1px == overflow space for box-shadow */
	padding:0.25em 0 0.25em 1px;
	text-align:left;
	font:bold 125%/120% arial,hevletica,sans-serif;
	background:#BEF;
	border-bottom:1px solid #8CD;
}

.bevelMenu li {
	display:inline;
}

.bevelMenu a {
	display:inline-block;
	vertical-align:top;
	padding:0.2em 0.5em;
	text-decoration:none;
	color:#000;
	border:1px solid #BEF;
}

.bevelMenu a:hover {
	background:#3BF;
	border-color:#BEF #234 #234 #BEF;
	-webkit-box-shadow:
		-1px -1px 0 #8AB,
		0 0 0 1px #578;
	box-shadow:
		-1px -1px 0 #8AB,
		0 0 0 1px #578;
}

.bevelMenu a:active,
.bevelMenu a:focus {
	background:#6CF;
	border-color:#234 #BEF #BEF #234;
	-webkit-box-shadow:
		1px 1px 0 #578,
		0 0 0 1px #8AB;
	box-shadow:
		1px 1px 0 #578,
		0 0 0 1px #8AB;
}

Code (markup):

Should be near identical to the legacy IE appearance, but work in all modern browsers as well as IE 9+.

Note, the only reason I have the -webkit- prefix in there is for Safari, since pretty much every other browser maker has now said **** browser prefixes... Praise be!

 

You're truly exceptional...well explained

 

Great post. You may wish to use glossy buttons to decorate your horizontal menu.
I find this tutorial useful:
http://kewlskool.com/how-to-use-css-to-generate-glossy-buttons/