oneblackcrayon/googleplusnavbar.html

## googleplusnavbar.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Google Nav Bar</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta charset="utf-8">
</head>


<style type="text/css">
body {
font: 12px/12px Helvetica,sans-serif;
margin:0;
padding:0;
text-align:center;
position:relative;
}


div{
background:#454545;
display:block;
margin:0;
padding:0;
position:absolute;
top:0;
left:0;
right:0;
}

a,a:link,a:hover,a:visited,a:active,:before,a:before,a:hover:before {
-webkit-transition:  all 0.2s ease-in-out;
-moz-transition:  all 0.2s ease-in-out;
-o-transition:  all 0.2s ease-in-out;
}


ul {
display:block;
margin:0 0 10px;
padding:0;

position:relative;
top:0;
right:0;
left:0;

text-align:center;
}


ul li {
display:inline;
float:left;
margin:0;
padding:0;
}


ul li a {
background:#454545;
color:#fcfcfc;
display:block;
float:left;
margin:0;
padding:12px;
position:relative;
text-decoration:none;
}


ul li a:before {
content:"";
border-color: transparent transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-10px;
left:30%;
}


ul li a:hover {
background:#323232;
margin:0;
}

ul li a:hover:before {
content:"";
border-color: #323232 transparent transparent transparent;
border-style: solid;
border-width: 10px;
height:0;
width:0;
position:absolute;
bottom:-20px;
left:30%;
}


</style>
<body>


<div>
    <ul>
        <li><a href="#you">you</a></li>
        <li><a href="#web">web</a></li>
        <li><a href="#mail">mail</a></li>
        <li><a href="#docs">docs</a></li>
        <li><a href="#reader">reader</a></li>
    </ul>


<div style="clear:both;display:block;height:0;"></div>

</div><!-- end /nav -->

</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Google Nav Bar</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta charset="utf-8">
	</head>


	<style type="text/css">
	body {
	font: 12px/12px Helvetica,sans-serif;
	margin:0;
	padding:0;
	text-align:center;
	position:relative;
	}


	div{
	background:#454545;
	display:block;
	margin:0;
	padding:0;
	position:absolute;
	top:0;
	left:0;
	right:0;
	}

	a,a:link,a:hover,a:visited,a:active,:before,a:before,a:hover:before {
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	-o-transition: all 0.2s ease-in-out;
	}


	ul {
	display:block;
	margin:0 0 10px;
	padding:0;

	position:relative;
	top:0;
	right:0;
	left:0;

	text-align:center;
	}


	ul li {
	display:inline;
	float:left;
	margin:0;
	padding:0;
	}


	ul li a {
	background:#454545;
	color:#fcfcfc;
	display:block;
	float:left;
	margin:0;
	padding:12px;
	position:relative;
	text-decoration:none;
	}


	ul li a:before {
	content:"";
	border-color: transparent transparent transparent transparent;
	border-style: solid;
	border-width: 10px;
	height:0;
	width:0;
	position:absolute;
	bottom:-10px;
	left:30%;
	}


	ul li a:hover {
	background:#323232;
	margin:0;
	}

	ul li a:hover:before {
	content:"";
	border-color: #323232 transparent transparent transparent;
	border-style: solid;
	border-width: 10px;
	height:0;
	width:0;
	position:absolute;
	bottom:-20px;
	left:30%;
	}


	</style>
	<body>



	<div>
	<ul>
	<li><a href="#you">you</a></li>
	<li><a href="#web">web</a></li>
	<li><a href="#mail">mail</a></li>
	<li><a href="#docs">docs</a></li>
	<li><a href="#reader">reader</a></li>
	</ul>


	<div style="clear:both;display:block;height:0;"></div>

	</div><!-- end /nav -->

	</body>
	</html>