<!DOCTYPE html>
<!--[if IE 8]>
<html class="no-js ie8 oldie" lang="en">
<![endif]-->
<!--[if gt IE 8]>
<!-->
<html lang="en">
<!--<![endif]-->
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style>
/* RESET*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, figure {
margin: 0;
padding: 0;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
ul {
list-style: none;
}
table {
border-collapse: separate;
border-spacing: 0;
}
img{
border: none;
}
/* DEMO HEADER */
body{
overflow-x: hidden;
overflow-y: scroll;
font-family: 13px/20px "Droid Sans",Arial,"Helvetica Neue","Lucida Grande",sans-serif;
color: #444;
border-top: 3px solid #444;
background:url(../img/texture.jpg) repeat;
overflow-x:hidden;
}
h1.title_name {
color: #685440;
font-family: "Trebuchet MS","Myriad Pro",Arial,sans-serif;
font-size: 3em;
font-weight: normal;
line-height: 1em;
margin: 0;
padding: 10px 0 0;
text-align: center;
background-color:#404853;
}
h1.title_name span {
color: rgba(255, 255, 255, 0.9);
font-family: normal Georgia,'Times New Roman',Times,serif;
font-size: 0.9em;
}
h1.title_name small {
color: #8EC63F;
display: block;
font-family: normal Verdana,Arial,Helvetica,sans-serif;
font-size: 0.2em;
letter-spacing: 0.5em;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
text-transform: uppercase;
}
a{
color:#FFFFFF;
text-decoration:none;
}
a:hover{
color:#8EC63F;
text-decoration:none;
-webkit-transition: color .25s ease-out;
-moz-transition: color .25s ease-out;
-o-transition: color .25s ease-out;
transition: color .25s ease-out;
}
/* DEMO BODY */
footer {
width:100%;
margin: 0 auto;
padding:20px;
text-align: center;
clear: both;
position:absolute;
bottom:0;
background:#404853;
overflow:hidden;
}
footer p {
letter-spacing: 1px;
color:#8C9198;
font-size:0.9em;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
/* DEMO STAR */
#container { width: 750px; margin: 0 auto;}
.demo {
overflow:hidden;
padding-bottom:1em;
margin: 10em 0 0 0;
}
.demo a {
text-decoration: none;
transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;
-webkit-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;
-o-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;
-ms-transition: background-color 0.2s ease 0s, border 0.2s ease 0s, color 0.2s ease 0s, opacity 0.2s ease-in-out 0s;
}
#main-nav {
margin: 0 auto;
}
#main-nav > ul {
clear:both;
}
#main-nav li {
float: left;
list-style: none outside none;
margin: 0;
position: relative;
}
#main-nav a {
border-bottom: 1px solid transparent;
border-top: 6px solid transparent;
color: #3A3A3A;
display: block;
font-family: 'Open Sans','Lucida Sans Unicode','Lucida Grande',sans-serif;
font-size: 12px;
font-weight: 800;
letter-spacing: -0.08px;
padding: 26px 20px 40px;
position: relative;
text-align: center;
text-transform: uppercase;
z-index: 98;
}
#main-nav a:after {
color: #AEAEAE;
content: attr(data-description);
display: block;
font-size: 11px;
font-style: italic;
font-weight: 400;
line-height: 0;
margin: 3px 0 -3px;
text-align: center;
text-transform: lowercase;
}
#main-nav a:hover, #main-nav .hover > a, #main-nav .current > a{
background:#F1F1F1;
border-bottom-color: #F15A23;
border-top-color: #F15A23;
color: #F15A23;
}
#main-nav .current:after {
background: #F15A23;
bottom: -2.5px;
content: "";
display: block;
height: 5px;
left: 50%;
margin: 0 0 0 -2.5px;
position: absolute;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
width: 5px;
}
#main-nav ul ul a:hover, #main-nav ul ul .hover > a, #main-nav ul ul .current > a #main-nav ul ul .current > a:hover, #nav-1 ul ul > a, #nav-1 ul ul > a:hover, #nav-2 ul ul > a, #nav-2 ul ul > a, #nav-2 ul ul > a:hover, #nav-2 ul ul > a:hover, #nav-2 ul ul > a, #nav-2 ul ul > a:hover, . #nav-3 ul ul > a, #nav-3 ul ul > a:hover, #nav-5 ul ul > a, #nav-5 ul ul > a:hover {
background:#F15A23;
color: #FFFFFF;
}
#main-nav ul ul ul {
left: 200px !important;
top: 0 !important;
}
</style>
<title>A Navigation With CSS3 No Javascript</title>
</head>
<body>
<header>
<h1 class="title_name"><span>CSS3 导航 无 Javascript</span><small>by airoschou</small></h1>
</header>
<div id="container">
<div class="demo">
<nav id="main-nav">
<ul>
<li id="nav-1" class="current">
<a data-description="my website" href="/">首页</a>
</li>
<li id="nav-2">
<a data-description="about me" href="/">关于</a>
</li>
<li id="nav-3">
<a data-description="my works" href="/">配置</a>
</li>
<li id="nav-4">
<a data-description="graphic works" href="/">图形</a>
</li>
<li id="nav-5">
<a data-description="more tutorials" href="/">文章</a>
</li>
</ul>
</nav><!--! end of navi -->
</div> <!--! end of demo -->
</div> <!--! end of #container -->
</body>
</html>