반응형
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;
}
반응형
'오픈소스SW' 카테고리의 다른 글
| Web-Based HTML Editor 비교 및 미리보기 (0) | 2008.12.02 |
|---|---|
| core file 분석 (0) | 2008.04.17 |
| 공개웹방화벽을 이용한 보안대응 (0) | 2008.01.11 |
| 공개SW라이센스가이드(20007.11) (0) | 2008.01.05 |
| [펌]오라클 OCP 데이터베이스 백업과 복구전략 (0) | 2007.09.06 |