Snap Builder HTML5 CSS3 Free Public Codes Library


<!DOCTYPE html>
<head>
<title>CSS3 Triangle Menu Navigation</title>

<style type="text/css">
/* Begin CSS3 Triangle Menu Navigation */
/* == This Script Free To Use Providing This Notice Remains == */
/* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */
/* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */
*, body, button, input, textarea, select {text-rendering: optimizeLegibility;margin:0 auto; width:auto; font-family:verdana,arial,ms sans serif; font-size:100%; text-shadow:0px 1px 1px rgba(0,0,0,0.2);}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal;}
q:before,q:after {content:'';}
abbr,acronym { border:0;}
li {background:#007730;float:left;padding:5px;margin-right:2px;position:relative;}
li:hover {background:#0000ff;}
li:hover:after {border-left:15px solid #0000ff;}
li a {padding-left:15px;display:block;color:#ffffff;text-decoration:none;}
li:after {width:0;height:0;border-top:14px solid transparent;border-bottom:15px solid transparent;border-left:15px solid #007730;content:"";right:-15px;top:0;position:absolute;z-index:9;}
li:before {content:"";z-index:8;width:0;height:0;border-top:14px solid transparent;border-bottom:15px solid transparent;border-left:15px solid #ffffff;right:-17px;top:0;position:absolute;}
#content {position:absolute; top:100px; left:0px; margin:0 0 0 15px;}
</style>

</head>
<body>

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Ramblings</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

<div id="content">
<h3>CSS3 Triangle Menu Navigation</h3>
<p><br />Roll your cursor over the navigation bar for an example.</p>
<br /><br />
<p>[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_229.html">CSS3 Triangle Menu Navigation Code Snippet</a> page. ]</p>
</div>

</body>
</html>