CSS3 Corporate Fun

Author: Sander van Dragt

Comments: "The pushing of the buttons is simulated by adjusting the size of the top and bottom border. Also, top-level lists have a bigger border ("bevel") in order to improve the understanding of hierarchy. Unfortunately, these examples are not very suitable for practical use, as the most widely used browser (IE6/win) is not supported (try!), and the code is dirty, however it might prove to be an interesting study. However, any improvements to improve compatibility are very welcome."

Browser support chart

HTML
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a>
<ul id="subnavlist">
<li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
<li><a href="#">Subitem two</a></li>
<li><a href="#">Subitem three</a></li>
<li><a href="#">Subitem four</a></li>
</ul>

</li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
</ul>
</div>

CSS
div#navcontainer
{
position: relative;
font: small-caps bold small/24px "Times New Roman", serif;
letter-spacing: 1px;
text-align: center;
}

ul#navlist
{
border-top: 1px solid #fff;
margin: 0;
width: 480px;
/* 4 * 120px li */
}

ul#subnavlist
{
border-bottom: 2px solid #444;
border-left: 1px solid #444;
border-right: 1px solid #888;
margin: 0;
padding: 0;
position: absolute;
top: 30px;
width: 120px;
}

/* all buttons */
ul#navlist li > a:link, ul#navlist li > a:visited, ul#navlist li * a:link, ul#navlist li * a:visited
{
text-decoration: none;
width: 120px;
}

#navlist li
{
display: inline;
list-style-type: none;
margin: 0;
padding: 0;
}

/* parents */
ul#navlist li > a:link, ul#navlist li > a:visited
{
background: #F60;
border-bottom: 5px solid #ccc;
border-top: 0;
color: #c00;
float: left;
}

ul#navlist li > a:hover
{
background: #f5f5f5;
border-bottom: 4px solid #eee;
border-top: 1px solid #fff;
color: #000;
}

/* children */
ul#navlist li * a:link, ul#navlist li * a:visited
{
background: #ccc;
border-bottom: 0;
border-top: 2px solid #bbb;
color: #777;
display: block;
float: none;
}

ul#navlist li * a:hover
{
background: #999;
border-bottom: 1px solid #888;
border-top: 1px solid #eee;
color: #fff;
}

/* active states */
a:link[id=current], a:visited[id=current]
{
background: #c30 !important;
color: #000 !important;
}

a:hover[id=current] { background: #f5f5f5 !important; }

a:link[id=subcurrent], a:visited[id=subcurrent]
{
background: #444 !important;
color: #fff !important;
}

a:hover[id=subcurrent] { background: #000 !important; }


ABOUT THE CODE
Before using these lists, please check the authors site for the original CSS code. If you intend to use the code without any modification, consult the author first.