<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css" />
</head>
<body>
<div class="nav">
<ul>
<li><a class="tooltip tooltip-effect-1" href="#">Home<span class="tooltip-content"><i class="fa fa-fw fa-home"></i></span></a></li>
<li><a class="tooltip tooltip-effect-2" href="#">Services<span class="tooltip-content"><i class="fa fa-fw fa-briefcase"></i></span></a></li>
<li><a class="tooltip tooltip-effect-3" href="#">Products<span class="tooltip-content"><i class="fa fa-fw fa-archive"></i></span></a></li>
<li><a class="tooltip tooltip-effect-4" href="#">Partners<span class="tooltip-content"><i class="fa fa-fw fa-users"></i></span></a></li>
<li><a class="tooltip tooltip-effect-5" href="#">People<span class="tooltip-content"><i class="fa fa-fw fa-user"></i></span></a></li>
<li><a class="tooltip tooltip-effect-6" href="#">Contact<span class="tooltip-content"><i class="fa fa-fw fa-envelope"></i></span></a></li>
<li><a class="tooltip tooltip-effect-7" href="cn-index.html">中文<span class="tooltip-content"><i class="fa fa-fw fa-retweet"></i></span></a></li>
</ul>
</div>
<div class="">
</div>
</body>
</html>
/* Global */
html{width:100%;
height:100%;
-ms-text-size-adjust:none;
-webkit-text-size-adjust:none;
-moz-text-size-adjust:none;
-o-text-size-adjust:none;
}
body{margin:0;
padding:0;
width:100%;
height:100%;
background:#eeeeee;
color:#74777b;
font-weight:500;
font-size:1em;
font-family:'Raleway', Arial, sans-serif;
}
ul{list-style:none;
padding:20px 0 0 200px;
}
a:link,a:visited{text-decoration:none;
outline:none;}
*, *:after, *:before{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box; }
.clearfix:before,.clearfix:after{ content: ''; display:block;}
.clearfix:after { clear: both; }
/* Navigator */
.nav{
width:1000px;
height:75px;
margin:0px 100px 0 auto;
font-weight:200;
/*background:url(../img/Navbar.png)no-repeat center center;*/
background-color: black;
}
.nav ul li {
display: inline-block;
position: relative;
margin: 0 1em;
font-size: 1.1em;
}
.nav ul li a {
display: inline-block;
font-weight: 700;
padding: 0.15em 0.25em 0;
-webkit-transition: color 0.3s;
-moz-transition: color 0.3s;
-o-transition: color 0.3s;
transition:color 0.3s;
}
.nav a{
color: white;
/*color:rgba(0,0,0,0.3);*/}
.nav a:hover,.nav a:focus{color:#fff;}
.nav li a .nav1{position: absolute;
left: -999em;
visibility: hidden;
height: 100px;
width: 70px;
}
.nav li a, .nav li a:hover .nav1{
line-height: 20px;
text-decoration: none;
color: #666666;
display: block;
text-align: center;
}
.nav li a:hover, .nav li a:hover .nav1 {
color: white;
}
/* Tooltip */
.tooltip {
display: inline;
position: relative;
z-index: 999;
}
.tooltip-content {
position: absolute;
z-index: 9999;
width: 80px;
height: 80px;
padding-top: 25px;
left: 50%;
margin-left: -40px;
bottom: 100%;
border-radius: 50%;
text-align: center;
background: #fff;
color: #666666;
opacity: 0;
margin-bottom: 20px;
cursor: default;
pointer-events: none;
}
.tooltip-content i {
opacity: 0;
}
.tooltip:hover .tooltip-content,
.tooltip:hover .tooltip-content i {
opacity: 1;
}
.tooltip-effect-1 .tooltip-content {
-webkit-transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);
transform: translate3d(0,10px,0) rotate3d(1,1,1,45deg);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.tooltip-effect-1 .tooltip-content i {
-webkit-transform: scale3d(0,0,1);
transform: scale3d(0,0,1);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.tooltip-effect-2 .tooltip-content {
-webkit-transform: translate3d(0,10px,0);
transform: translate3d(0,10px,0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.tooltip-effect-2 .tooltip-content i {
-webkit-transform: translate3d(0,15px,0);
transform: translate3d(0,15px,0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.tooltip-effect-3 .tooltip-content {
-webkit-transform: translate3d(0,10px,0) rotate3d(0,1,0,90deg);
transform: translate3d(0,10px,0) rotate3d(0,1,0,90deg);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.tooltip-effect-3 .tooltip-content i {
-webkit-transform: scale3d(0,0,1);
transform: scale3d(0,0,1);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.tooltip-effect-4 .tooltip-content {
-webkit-transform: translate3d(0,-20px,0);
transform: translate3d(0,-20px,0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.tooltip-effect-4 .tooltip-content i {
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.tooltip-effect-5 .tooltip-content {
-webkit-transform: scale3d(0,0,1);
transform: scale3d(0,0,1);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.tooltip-effect-5 .tooltip-content i {
-webkit-transform: translate3d(0,20px,0);
transform: translate3d(0,20px,0);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.tooltip-effect-6 .tooltip-content {
-webkit-transform: translate3d(0,10px,0) rotate3d(1,1,1,-45deg);
transform: translate3d(0,10px,0) rotate3d(1,1,1,-45deg);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.tooltip-effect-6 .tooltip-content i {
-webkit-transform: scale3d(0,0,1);
transform: scale3d(0,0,1);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.tooltip-effect-7 .tooltip-content {
-webkit-transform: translate3d(0,10px,0) rotate3d(1,1,0,-90deg);
transform: translate3d(0,10px,0) rotate3d(1,1,0,-90deg);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.tooltip-effect-7 .tooltip-content i {
-webkit-transform: scale3d(0,0,1);
transform: scale3d(0,0,1);
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
transition: opacity 0.3s, transform 0.3s;
}
.tooltip:hover .tooltip-content,
.tooltip:hover .tooltip-content i {
pointer-events: auto;
-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);
transform: translate3d(0,0,0) scale3d(1,1,1);
}
.tooltip-effect-1:hover .tooltip-content i {
-webkit-transform: rotate3d(1,1,1,0);
transform: rotate3d(1,1,1,0);
}
/* Arrow */
.tooltip-content::after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin: -7px 0 0 -15px;
width: 30px;
height: 20px;
background: url(../img/tooltip1.svg) no-repeat center center;
background-size: 100%;
}