Snap Builder HTML5 CSS3 Free Public Codes Library


<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<title>CSS Horizontal Menu - Single Level</title>

<style>
/* Begin CSS Horizontal Menu */
/* == 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 == */
div.snaphormenu {
width:600px;
*/ Add --> margin:0px auto; to center the menu */
text-align:center;
height:25px;
background:#cad0db;
*position:relative;*top:1px; /* Hacks for narly IE6 & IE7 */
}
div.snaphormenu a {
display:inline-block;
padding:0 20px;
margin-right:1px; /* specify distance between each menu tab */
font:normal 12px arial;
line-height:24px;
border:1px solid #cad0db;
border-bottom:0px;
text-decoration:none;
color:#666;
vertical-align:top;
text-decoration:none;
background:#f7f7f7;
}
div.snaphormenu a:hover, div.snaphormenu {line-height:25px;color:#007730;background:#e9ecf0;}
div.snaphormenu a.current {line-height:25px;color:#990000;background:#e9ecf0;}
div.snaphormenu a:active {line-height:25px;color:#0000ff;background:#e9ecf0;}
div.snapsubmenu {
width:598px; /* set the bottom bar width */
*/ Add --> margin:0px auto; to center the bottom bar */
height:8px;border:1px solid #cad0db;
background:#e9ecf0;
}
</style>

<style>
/* not part of the code below */
body {margin-top:50px;font-family:arial, verdana, tahoma;color:#000;background-color:#ffffff;}
.notes{font-family:arial, verdana, tahoma;color:#000;}
</style>

</head>
<body>

<div class="snaphormenu">
<a href="http://snapbuilder.com">Snap Builder</a>
<a href="https://snapbuildercartoons.com">Mascots</a>
<a href="#" class="current">CSS Menu</a>
<a href="https://snapbuildercartoons.com">Single Level</a>
<a href="http://snapbuilder.net/domains-registration/">Domains</a>
</div>
<div class="snapsubmenu"> </div>

<h1>CSS Horizontal Menu - Single Level</h1>

<p>A single level CSS menu that is light in code size.</p>

<br />
<div class="notes">Hover mouse cursor over the menu above to preview the effect.</div>

<br /><br />
<div class="notes">
[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_259.html">CSS Horizontal Menu Code Snippet</a> page. ]
</div>

</body>
</html>