<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" >
<head>
	<title>Centered CSS menu examples - Tabs, Bars and other Designs</title>
	<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
	<meta name="description" content="Centered CSS menu examples - Tabs, Bars and other Designs" />
	<meta name="robots" content="index, follow" />
<style media="screen" type="text/css">
/* <!-- */
/* General styles */
body {
    margin:0;
    padding:0;
    border:0;
    width:100%;
    background:#fff;
    font-size:90%;
}
h1, h2, h3, p {
    padding-left:20px;
    clear:left;
}
h2 {
    padding-top:30px;
}

/* -------------------------------------------------- */
/* roundbar-blue */
/* -------------------------------------------------- */
div#roundbar-blue {
    clear:left;
    float:left;
    width:100%;
    background:#80C8FF;
    font-family:Trebuchet MS, Helvetica, sans-serif;
    border-bottom:1px solid #49A9FF;
    overflow:hidden;
    margin-bottom:2em;
}
div#roundbar-blue ul {
    clear:left;
    float:right;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    right:50%;
    text-align:center;
}
div#roundbar-blue ul li {
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:50%;
}
div#roundbar-blue ul li.first {
    border-left:1px solid #49A9FF;
}
div#roundbar-blue ul li.last {
    border-right:1px solid #99D8FF;
}
div#roundbar-blue ul li a {
    display:block;
    margin:0;
    padding:.4em .8em;
    color:#000;
    text-decoration:none;
    border-left:1px solid #99D8FF;
    border-right:1px solid #49A9FF;
    line-height:1.3em;
}
div#roundbar-blue ul li.active a {
    font-weight:bold;
}
div#roundbar-blue ul li a span {
    display:block;
}

/* -------------------------------------------------- */
/* roundbar-grey */
/* -------------------------------------------------- */
div#roundbar-grey {
    clear:left;
    float:left;
    width:100%;
    background:#B7B7B7;
    font-family:Trebuchet MS, Helvetica, sans-serif;
    border-bottom:1px solid #A8A8A8;
    overflow:hidden;
    margin-bottom:2em;
}
div#roundbar-grey ul {
    clear:left;
    float:right;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    right:50%;
    text-align:center;
}
div#roundbar-grey ul li {
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:50%;
}
div#roundbar-grey ul li.first {
    border-left:1px solid #A8A8A8;
}
div#roundbar-grey ul li.last {
    border-right:1px solid #C8C8C8;
}
div#roundbar-grey ul li a {
    display:block;
    margin:0;
    padding:.4em .8em;
    color:#000;
    text-decoration:none;
    border-left:1px solid #C8C8C8;
    border-right:1px solid #A8A8A8;
    line-height:1.3em;
}
div#roundbar-grey ul li a span {
    display:block;
}
div#roundbar-grey ul li.active a {
    font-weight:bold;
}

/* -------------------------------------------------- */
/* boxtab-blue */
/* -------------------------------------------------- */
div#boxtab-blue {
    clear:left;
    float:left;
    padding:0;
    width:100%;
    font-family:Verdana, Geneva, sans-serif;
    border-bottom:1px solid #369;
    margin-bottom:2em;
}
div#boxtab-blue ul {
    float:right;
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    right:50%;
    text-align:center;
}
div#boxtab-blue ul li {
    display:block;
    float:left;
    list-style:none;
    margin:20px 0 0 0;
    padding:0;
    position:relative;
    left:50%;
}
div#boxtab-blue ul li a {
    display:block;
    float:left;
    margin:0 1px;
    padding:5px 10px;
    background:#fff;
    text-decoration:none;
    color:#000;
    border-top:1px solid #369;
    border-left:1px solid #369;
    border-right:1px solid #369;
    position:relative;
}
div#boxtab-blue ul li a:hover {
    background:#36f;
    color:#fff;
}
div#boxtab-blue ul li.active {
    margin-top:10px;
    position:relative;
    top:1px;
}
div#boxtab-blue ul li.active a,
div#boxtab-blue ul li.active a:hover {
    position:relative;
    bottom:0;
    padding:10px;
    background:#fff;
    color:#000;
    font-weight:bold;
}

/* -------------------------------------------------- */
/* talltabs-apple */
/* -------------------------------------------------- */
div#talltabs-apple {
    clear:left;
    float:left;
    padding:0;
    border-top:6px solid #AAD36E;
    width:100%;
    overflow:hidden;
    font-family:Georgia, serif;
    margin-bottom:2em;
}
div#talltabs-apple ul {
    float:right;
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    right:50%;
    text-align:center;
}
div#talltabs-apple ul li {
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:50%;
}
div#talltabs-apple ul li a {
    display:block;
    float:left;
    margin:0 1px 0 0;
    padding:30px 10px 6px 10px;
    background:#AAD36E;
    text-decoration:none;
    color:#fff;
}
div#talltabs-apple ul li a:hover {
    padding:35px 10px 6px 10px;
}
div#talltabs-apple ul li.active a,
div#talltabs-apple ul li.active a:hover {
    padding:40px 10px 6px 10px;
}

/* -------------------------------------------------- */
/* talltabs-maroon */
/* -------------------------------------------------- */
div#talltabs-maroon {
    clear:left;
    float:left;
    padding:0;
    border-top:6px solid #CD324F;
    width:100%;
    overflow:hidden;
    font-family:Georgia, serif;
    margin-bottom:2em;
}
div#talltabs-maroon ul {
    float:right;
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    right:50%;
    text-align:center;
}
div#talltabs-maroon ul li {
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:50%;
}
div#talltabs-maroon ul li a {
    display:block;
    float:left;
    margin:0 1px 0 0;
    padding:30px 10px 6px 10px;
    background:#CD324F;
    text-decoration:none;
    color:#fff;
}
div#talltabs-maroon ul li a:hover {
    padding:35px 10px 6px 10px;
}
div#talltabs-maroon ul li.active a,
div#talltabs-maroon ul li.active a:hover {
    padding:40px 10px 6px 10px;
}

/* -------------------------------------------------- */
/* talltabs-blue */
/* -------------------------------------------------- */
div#talltabs-blue {
    clear:left;
    float:left;
    padding:0;
    border-top:6px solid #336699;
    width:100%;
    overflow:hidden;
    font-family:Georgia, serif;
    margin-bottom:2em;
}
div#talltabs-blue ul {
    float:right;
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    right:50%;
    text-align:center;
}
div#talltabs-blue ul li {
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:50%;
}
div#talltabs-blue ul li a {
    display:block;
    float:left;
    margin:0 1px 0 0;
    padding:30px 10px 6px 10px;
    background:#336699;
    text-decoration:none;
    color:#fff;
}
div#talltabs-blue ul li a:hover {
    padding:35px 10px 6px 10px;
}
div#talltabs-blue ul li.active a,
div#talltabs-blue ul li.active a:hover {
    padding:40px 10px 6px 10px;
}

/* -------------------------------------------------- */
/* talltabs-orange */
/* -------------------------------------------------- */
div#talltabs-orange {
    clear:left;
    float:left;
    padding:0;
    border-top:6px solid #FF8D3A;
    width:100%;
    overflow:hidden;
    font-family:Georgia, serif;
    margin-bottom:2em;
}
div#talltabs-orange ul {
    float:right;
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    right:50%;
    text-align:center;
}
div#talltabs-orange ul li {
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:50%;
}
div#talltabs-orange ul li a {
    display:block;
    float:left;
    margin:0 1px 0 0;
    padding:30px 10px 6px 10px;
    background:#FF8D3A;
    text-decoration:none;
    color:#fff;
}
div#talltabs-orange ul li a:hover {
    padding:35px 10px 6px 10px;
}
div#talltabs-orange ul li.active a,
div#talltabs-orange ul li.active a:hover {
    padding:40px 10px 6px 10px;
}

/* -------------------------------------------------- */
/* talltabs-black */
/* -------------------------------------------------- */
div#talltabs-black {
    clear:left;
    float:left;
    padding:0;
    border-top:6px solid #000;
    width:100%;
    overflow:hidden;
    font-family:Georgia, serif;
    margin-bottom:2em;
}
div#talltabs-black ul {
    float:right;
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    right:50%;
    text-align:center;
}
div#talltabs-black ul li {
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:50%;
}
div#talltabs-black ul li a {
    display:block;
    float:left;
    margin:0 1px 0 0;
    padding:30px 10px 6px 10px;
    background:#000;
    text-decoration:none;
    color:#fff;
}
div#talltabs-black ul li a:hover {
    padding:35px 10px 6px 10px;
}
div#talltabs-black ul li.active a,
div#talltabs-black ul li.active a:hover {
    padding:40px 10px 6px 10px;
}

/* -------------------------------------------------- */
/* talltabs-Pirates of Silicon Valley Yellow CUSTOM */
/* -------------------------------------------------- */
div#talltabs-POSVYcustom {
    clear:left;
    float:left;
    padding:0;
    border-top:6px solid #fffc6b;
    width:100%;
    overflow:hidden;
    font-family:Georgia, serif;
    margin-bottom:2em;
}
div#talltabs-POSVYcustom ul {
    float:right;
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    right:50%;
    text-align:center;
}
div#talltabs-POSVYcustom ul li {
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:50%;
}
div#talltabs-POSVYcustom ul li a {
    display:block;
    float:left;
    margin:0 1px 0 0;
    padding:30px 10px 6px 10px;
    background:#fffc6b;
    text-decoration:none;
    color:#000;
}
div#talltabs-POSVYcustom ul li a:hover {
    padding:35px 10px 6px 10px;
}
div#talltabs-POSVYcustom ul li.active a,
div#talltabs-POSVYcustom ul li.active a:hover {
    padding:40px 10px 6px 10px;
}

/* -------------------------------------------------- */
/* a FEW minutes To MIDNIGHT black CUSTOM */
/* -------------------------------------------------- */
div#talltabs-AFMTMBcustom {
    clear:left;
    float:left;
    padding:0;
    border-top:6px solid #000;
    width:100%;
    overflow:hidden;
    font-family:Georgia, serif;
    margin-bottom:2em;
}
div#talltabs-AFMTMBcustom ul {
    float:right;
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    right:50%;
    text-align:center;
}
div#talltabs-AFMTMBcustom ul li {
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:50%;
}
div#talltabs-AFMTMBcustom ul li a {
    display:block;
    float:left;
    margin:0 1px 0 0;
    padding:30px 10px 6px 10px;
    background:#000;
    text-decoration:none;
    color:#fffc6b;
}
div#talltabs-AFMTMBcustom ul li a:hover {
    padding:35px 10px 6px 10px;
}
div#talltabs-AFMTMBcustom ul li.active a,
div#talltabs-AFMTMBcustom ul li.active a:hover {
    padding:40px 10px 6px 10px;
}

/* -------------------------------------------------- */
/* metaltop-gold */
/* -------------------------------------------------- */
div#metaltop-gold {
    clear:left;
    float:left;
    padding:0;
    background:#CBC396;
    border-bottom:1px solid #7E7567;
    width:100%;
    border-top:4px solid #000;
    overflow:hidden;
    font-family:Verdana, sans-serif;
    margin-bottom:2em;
}
div#metaltop-gold ul {
    float:right;
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    right:50%;
    text-align:center;
}
div#metaltop-gold ul li {
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:50%;
}
div#metaltop-gold ul li.first {
    border-left:1px solid #7E7567;
}
div#metaltop-gold ul li.last {
    border-right:1px solid #ECE9D8;
}
div#metaltop-gold ul li a {
    display:block;
    float:left;
    margin:0;
    padding:20px 10px 6px 10px;
    border-left:1px solid #ECE9D8;
    border-right:1px solid #7E7567;
    text-decoration:none;
    color:#7D6A46;
    font-size:.8em;
    font-weight:bold;
    text-transform:uppercase;
    line-height:1.3em;
}
div#metaltop-gold ul li a:hover {
    color:#000;
    background-color:#ECE9D8;
    border-left:1px solid #fff;
    padding-top:18px;
    padding-bottom:8px;
}
div#metaltop-gold ul li.active a,
div#metaltop-gold ul li.active a:hover {
    color:#fff;
    background:#000;
    border-left:1px solid #000;
    padding-top:18px;
    padding-bottom:8px;
}

/* -------------------------------------------------- */
/* metaltop-teal */
/* -------------------------------------------------- */
div#metaltop-teal {
    clear:left;
    float:left;
    padding:0;
    background:#96CBCA;
    border-bottom:1px solid #677E78;
    width:100%;
    border-top:4px solid #000;
    overflow:hidden;
    font-family:Verdana, sans-serif;
    margin-bottom:2em;
}
div#metaltop-teal ul {
    float:right;
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    right:50%;
    text-align:center;
}
div#metaltop-teal ul li {
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:50%;
}
div#metaltop-teal ul li.first {
    border-left:1px solid #677E78;
}
div#metaltop-teal ul li.last {
    border-right:1px solid #D8ECEC;
}
div#metaltop-teal ul li a {
    display:block;
    float:left;
    margin:0;
    padding:20px 10px 6px 10px;
    border-left:1px solid #D8ECEC;
    border-right:1px solid #677E78;
    text-decoration:none;
    color:#467D71;
    font-size:.8em;
    font-weight:bold;
    text-transform:uppercase;
    line-height:1.3em;
}
div#metaltop-teal ul li a:hover {
    color:#000;
    background-color:#D8F5F4;
    border-left:1px solid #fff;
    padding-top:18px;
    padding-bottom:8px;
}
div#metaltop-teal ul li.active a,
div#metaltop-teal ul li.active a:hover {
    color:#fff;
    background:#000;
    border-left:1px solid #000;
    padding-top:18px;
    padding-bottom:8px;
}

/* -------------------------------------------------- */
/* metaltop-pink */
/* -------------------------------------------------- */
div#metaltop-pink {
    clear:left;
    float:left;
    padding:0;
    background:#E57B82;
    border-bottom:1px solid #895B69;
    width:100%;
    border-top:4px solid #000;
    overflow:hidden;
    font-family:Verdana, sans-serif;
    margin-bottom:2em;
}
div#metaltop-pink ul {
    float:right;
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    right:50%;
    text-align:center;
}
div#metaltop-pink ul li {
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:50%;
}
div#metaltop-pink ul li.first {
    border-left:1px solid #895B69;
}
div#metaltop-pink ul li.last {
    border-right:1px solid #F7B5BA;
}
div#metaltop-pink ul li a {
    display:block;
    float:left;
    margin:0;
    padding:20px 10px 6px 10px;
    border-left:1px solid #F7B5BA;
    border-right:1px solid #895B69;
    text-decoration:none;
    color:#982A47;
    font-size:.8em;
    font-weight:bold;
    text-transform:uppercase;
    line-height:1.3em;
}
div#metaltop-pink ul li a:hover {
    color:#000;
    background-color:#FFCED2;
    border-left:1px solid #fff;
    padding-top:18px;
    padding-bottom:8px;
}
div#metaltop-pink ul li.active a,
div#metaltop-pink ul li.active a:hover {
    color:#fff;
    background:#000;
    border-left:1px solid #000;
    padding-top:18px;
    padding-bottom:8px;
}

/* -------------------------------------------------- */
/* metaltop-lilac */
/* -------------------------------------------------- */
div#metaltop-lilac {
    clear:left;
    float:left;
    padding:0;
    background:#B096CB;
    border-bottom:1px solid #6D677E;
    width:100%;
    border-top:4px solid #000;
    overflow:hidden;
    font-family:Verdana, sans-serif;
    margin-bottom:2em;
}
div#metaltop-lilac ul {
    float:right;
    margin:0;
    padding:0;
    list-style:none;
    position:relative;
    right:50%;
    text-align:center;
}
div#metaltop-lilac ul li {
    display:block;
    float:left;
    list-style:none;
    margin:0;
    padding:0;
    position:relative;
    left:50%;
}
div#metaltop-lilac ul li.first {
    border-left:1px solid #6D677E;
}
div#metaltop-lilac ul li.last {
    border-right:1px solid #E2D8EC;
}
div#metaltop-lilac ul li a {
    display:block;
    float:left;
    margin:0;
    padding:20px 10px 6px 10px;
    border-left:1px solid #E2D8EC;
    border-right:1px solid #6D677E;
    text-decoration:none;
    color:#57467D;
    font-size:.8em;
    font-weight:bold;
    text-transform:uppercase;
    line-height:1.3em;
}
div#metaltop-lilac ul li a:hover {
    color:#000;
    background-color:#E6D8F5;
    border-left:1px solid #fff;
    padding-top:18px;
    padding-bottom:8px;
}
div#metaltop-lilac ul li.active a,
div#metaltop-lilac ul li.active a:hover {
    color:#fff;
    background:#000;
    border-left:1px solid #000;
    padding-top:18px;
    padding-bottom:8px;
}


/* Dropdown submenus */
div#centeredsubmenu {
    clear:both;
    float:left;
    margin:0 0 1em;
    padding:0;
    border-bottom:4px solid #000; /* black line below menu */
    width:100%;
    font-family:Verdana, Geneva, sans-serif; /* Menu font */
    font-size:90%; /* Menu text size */
    z-index:1000; /* This makes the dropdown menus appear above the page content below */
    position:relative;
 }
 
 /* Top menu items */
 div#centeredsubmenu ul {
    margin:0;
    padding:0;
    list-style:none;
    float:right;
    position:relative;
    right:50%;
 }
 div#centeredsubmenu > ul > li {
    margin:0 0 0 1px;
    padding:0;
    float:left;
    position:relative;
    left:50%;
    top:1px;
 }
 div#centeredsubmenu > ul > li a {
    display:block;
    margin:0;
    padding:.6em .5em .4em;
    font-size:1em;
    line-height:1em;
    background:#ddd;
    text-decoration:none;
    color:#444;
    font-weight:bold;
    border-bottom:1px solid #000;
 }
 div#centeredsubmenu > ul > li.active a {
    color:#fff;
    background:#000;
 }
 div#centeredsubmenu > ul > li a:hover {
    background:#36f; /* Top menu items background colour */
    color:#fff;
    border-bottom:1px solid #03f;
 }
 div#centeredsubmenu > ul > li:hover a { /* This line is required for IE 6 and below */
    background:#36f; /* Top menu items background colour */
    color:#fff;
    border-bottom:1px solid #03f;
 }
 
 /* Submenu items */
 div#centeredsubmenu ul ul {
    display:none; /* Sub menus are hidden by default */
    position:absolute;
    top:2em;
    left:0;
    width:10em; /* width of the drop-down menus */
 }
 div#centeredsubmenu ul ul li {
    clear:left;
    width:100%;
 }
 div#centeredsubmenu ul ul li a,
 div#centeredsubmenu ul li.active li a,
 div#centeredsubmenu ul li:hover ul li a { /* This line is required for IE 6 and below */
    font-size:.8em;
    font-weight:normal; /* resets the bold set for the top level menu items */
    background:#eee;
    color:#444;
    line-height:1.4em; /* overwrite line-height value from top menu */
    border-bottom:1px solid #ddd; /* sub menu item horizontal lines */
 }
 div#centeredsubmenu ul ul li a:hover,
 div#centeredsubmenu ul li.active ul li a:hover,
 div#centeredsubmenu ul li:hover ul li a:hover { /* This line is required for IE 6 and below */
    background:#36f; /* Sub menu items background colour */
    color:#fff;
 }
 
 /* Flip the last submenu so it stays within the page */
 div#centeredsubmenu ul li:last-child ul {
    left:auto; /* reset left:0; value */
    right:0; /* Set right value instead */
 }
 
 /* Make the sub menus appear on hover */
 div#centeredsubmenu ul li:hover ul { /* This line is required for IE 6 and below */
    display:block; /* Show the sub menus */
 }
/* --> */
</style>
</head>
<body>

<p>‹ <a href="https://matthewjamestaylor.com/css-centered-menus">Back to the centered menu article</a> by <a href="https://matthewjamestaylor.com">Matthew James Taylor</a></p>
<h1>CSS Centered Menus. No Hacks. Full Cross-Browser Compatible.</h1>
<p>The following centered menus all use the same HTML markup, only their CSS is different. To use any of the examples simply copy the HTML and CSS from the source of the page.</p>


<h2>Centered Menu with dropdown Example</h2>

<div id="centeredsubmenu">
    <ul>
        <li><a href="#">One</a>
            <ul>
                <li><a href="#">Sub one</a></li>
                <li><a href="#">Sub two</a></li>
                <li><a href="#">Sub three</a></li>
                <li><a href="#">Sub four</a></li>
                <li><a href="#">Sub five</a></li>
            </ul>
        </li>
        <li class="active"><a href="#" class="active">Two</a>
            <ul>
                <li><a href="#">Sub one</a></li>
                <li><a href="#">Sub two</a></li>
                <li><a href="#">Sub three</a></li>
                <li><a href="#">Sub four</a></li>
                <li><a href="#">Sub five is a long link that wraps</a></li>
            </ul>
        </li>
        <li><a href="#">Three</a>
            <ul>
                <li><a href="#">Sub one</a></li>
                <li><a href="#">Sub two</a></li>
                <li><a href="#">Sub three</a></li>
                <li><a href="#">Sub four</a></li>
                <li><a href="#">Sub five</a></li>
            </ul>
        </li>
        <li><a href="#">Four</a>
            <ul>
                <li><a href="#">Sub one</a></li>
                <li><a href="#">Sub two</a></li>
                <li><a href="#">Sub three</a></li>
                <li><a href="#">Sub four</a></li>
                <li><a href="#">Sub five</a></li>
            </ul>
        </li>
    </ul>
</div>

<h2>Centered Menu Examples</h2>

<h3>Roundbar blue</h3>
<div id="roundbar-blue">
	<ul>
		<li><a href="#">One</a></li>
		<li class="active"><a href="#">Two</a></li>
		<li><a href="#">Three</a></li>
		<li><a href="#">Four</a></li>
	</ul>
</div>

<h3>Roundbar grey</h3>
<div id="roundbar-grey">
	<ul>
		<li><a href="#">One</a></li>
		<li class="active"><a href="#">Two</a></li>
		<li><a href="#">Three</a></li>
		<li><a href="#">Four</a></li>
	</ul>
</div>

<h3>boxtab blue</h3>
<div id="boxtab-blue">
	<ul>
		<li><a href="#"><span>One</span></a></li>
		<li class="active"><a href="#"><span>Two</span></a></li>
		<li><a href="#"><span>Three</span></a></li>
		<li><a href="#"><span>Four</span></a></li>
	</ul>
</div>

<h3>talltabs apple</h3>
<div id="talltabs-apple">
	<ul>
		<li><a href="#">One</a></li>
		<li class="active"><a href="#">Two</a></li>
		<li><a href="#">Three</a></li>
		<li><a href="#">Four</a></li>
	</ul>
</div>

<h3>talltabs maroon</h3>
<div id="talltabs-maroon">
	<ul>
		<li><a href="#">One</a></li>
		<li class="active"><a href="#">Two</a></li>
		<li><a href="#">Three</a></li>
		<li><a href="#">Four</a></li>
	</ul>
</div>

<h3>talltabs blue</h3>
<div id="talltabs-blue">
	<ul>
		<li><a href="#">One</a></li>
		<li class="active"><a href="#">Two</a></li>
		<li><a href="#">Three</a></li>
		<li><a href="#">Four</a></li>
	</ul>
</div>

<h3>talltabs orange</h3>
<div id="talltabs-orange">
	<ul>
		<li><a href="#">One</a></li>
		<li class="active"><a href="#">Two</a></li>
		<li><a href="#">Three</a></li>
		<li><a href="#">Four</a></li>
	</ul>
</div>

<h3>talltabs black</h3>
<div id="talltabs-black">
	<ul>
		<li><a href="#">One</a></li>
		<li class="active"><a href="#">Two</a></li>
		<li><a href="#">Three</a></li>
		<li><a href="#">Four</a></li>
	</ul>
</div>

<h3>talltabs Pirates of Silicon Valley Yellow CUSTOM</h3>
<div id="talltabs-POSVYcustom">
	<ul>
		<li><a href="#">One</a></li>
		<li class="active"><a href="#">Two</a></li>
		<li><a href="#">Three</a></li>
		<li><a href="#">Four</a></li>
	</ul>
</div>

<h3>talltabs a FEW minutes To MIDNIGHT black CUSTOM</h3>
<div id="talltabs-AFMTMBcustom">
	<ul>
		<li><a href="#">One</a></li>
		<li class="active"><a href="#">Two</a></li>
		<li><a href="#">Three</a></li>
		<li><a href="#">Four</a></li>
	</ul>
</div>

<h3>topmetal gold</h3>
<div id="metaltop-gold">
	<ul>
		<li><a href="#">One</a></li>
		<li class="active"><a href="#">Two</a></li>
		<li><a href="#">Three</a></li>
		<li><a href="#">Four</a></li>
	</ul>
</div>

<h3>topmetal teal</h3>
<div id="metaltop-teal">
	<ul>
		<li><a href="#">One</a></li>
		<li class="active"><a href="#">Two</a></li>
		<li><a href="#">Three</a></li>
		<li><a href="#">Four</a></li>
	</ul>
</div>

<h3>topmetal pink</h3>
<div id="metaltop-pink">
	<ul>
		<li><a href="#">One</a></li>
		<li class="active"><a href="#">Two</a></li>
		<li><a href="#">Three</a></li>
		<li><a href="#">Four</a></li>
	</ul>
</div>

<h3>topmetal lilac</h3>
<div id="metaltop-lilac">
	<ul>
		<li><a href="#">One</a></li>
		<li class="active"><a href="#">Two</a></li>
		<li><a href="#">Three</a></li>
		<li><a href="#">Four</a></li>
	</ul>
</div>

<br /><br /><br /><br /><br /><br />

</body>
</html>
