An enlarging menu that one uses opacity for browsers that understand, and a separate style for IE6 using 'filters' to create the background shadow.

Again this is just a CSS styled unordered list using no images that will degrade well for text only browsers.

If you test this page at W3C.org for CSS validation you will find that it fails because opacity is not yet included in the checks for CSS 2.01. (Property opacity doesn't exist in CSS level 2.1 but exists in [css3] : 0.7)  It passes tests for accessibility OK.

Here is an example of what the NavBar code for Home looks like:

<ul id="grow">
   <li><a href="javascript:;"><em></em><b>Home</b></a></li>

 

#grow {padding:0; margin:0; list-style:none;}

#grow li {float:left; display:block; margin-right:5px; width:100px; height:25px;}

#grow li a {display:inline; float:left; width:100px; height:25px; position:absolute; text-align:center; text-decoration:none;}
display inline means to display horizontally.

#grow li a em {display:block; width:100px; height:25px; background:#874; border:1px solid #fff;}
display block means to display vertically, think in terms of paragraphs, each new paragraph falls under the last paragraph.

#grow li a b {display:block; width:100px; height:25px; background:transparent; color:#dd7; position:absolute; top:0; left:0; line-height:24px;}
The 'a' or anchor tag, 'b' or bold tag, and 'em' or emphasis, (italics) tag, are normal HTML tags with new rules attached to them for this NavBar.

#grow li a:hover {white-space:normal; cursor:pointer; z-index:100;}
White-space property refers to sequences of white-space on the page that will collapse into a single white-space. Text will wrap when necessary. This is the default behavior for all Browsers.

z-index refers to the stacking order on the surface of the page. One is the lowest, higher numbers can cover lower numbers.

/* opacity for browsers that can support */

#grow li a:hover em {display:block; width:115px; height:35px; left:7px; top:5px; position:absolute; background:#431; z-index:100; opacity:0.7; border:0}
opacity refers to levels of transparency.

#grow li a:hover b {width:110px; height:30px; top:-7px; left:-5px; z-index:200; background:#A96; font-size:1.1em; color:#ff9; line-height:29px; border:1px solid #fff;}

Note: a:hover MUST come after a:link and a:visited in the CSS definition in order to be effective!!

Note: a:active MUST come after a:hover in the CSS definition in order to be effective!!

Note: Pseudo-class names are not case-sensitive.

p {font-family: Verdana, Arial, Helvetica, Sans-serif; font-size:1em; color: #333; line-height: 1.2em;}