탭 방식으로 html에 옷을 입혀주는 css

http://clagnut.com/sandbox/csstabs/?writingtext=csstabs

The HTML:

<ul id="globalnav">
  <li><a href="#">Home</a></li>
  <li><a href="#" class="here">About</a>
    <ul>
      <li><a href="#">Vision</a></li>
      <li><a href="#">Team</a></li>
      <li><a href="#">Culture</a></li>
      <li><a href="#">Careers</a></li>
      <li><a href="#" class="here">History</a></li>
      <li><a href="#">Sponsorship</a></li>
    </ul>
  </li>
  <li><a href="#">News</a></li>
  <li><a href="#">Proof</a></li>
  <li><a href="#">Process</a></li>
  <li><a href="#">Expertise</a></li>
  <li><a href="#">Help</a></li>
</ul>

The CSS:

/*globalnav*/

#globalnav {
	position:relative;
	float:left;
	width:100%;
	padding:0 0 1.75em 1em;
	margin:0;
	list-style:none;
	line-height:1em;
}

#globalnav LI {
	float:left;
	margin:0;
	padding:0;
}

#globalnav A {
	display:block;
	color:#444;
	text-decoration:none;
	font-weight:bold;
	background:#ddd;
	margin:0;
	padding:0.25em 1em;
	border-left:1px solid #fff;
	border-top:1px solid #fff;
	border-right:1px solid #aaa;
}

#globalnav A:hover,
#globalnav A:active,
#globalnav A.here:link,
#globalnav A.here:visited {
	background:#bbb;
}

#globalnav A.here:link,
#globalnav A.here:visited {
	position:relative;
	z-index:102;
}

/*subnav*/

#globalnav UL {
	position:absolute;
	left:0;
	top:1.5em;
	float:left;
	background:#bbb;
	width:100%;
	margin:0;
	padding:0.25em 0.25em 0.25em 1em;
	list-style:none;
	border-top:1px solid #fff;
}

#globalnav UL LI {
	float:left;
	display:block;
	margin-top:1px;
}

#globalnav UL A {
	background:#bbb;
	color:#fff;
	display:inline;
	margin:0;
	padding:0 1em;
	border:0
}

#globalnav UL A:hover,
#globalnav UL A:active,
#globalnav UL A.here:link,
#globalnav UL A.here:visited {
	color:#444;
}