Rainbow Menu

Rainbow Menu Test

by Troy Alford

HTML

<div class="topbar">
    <ul class="nav"><li>Models</li><li>Services</li><li>Agency</li><li>Contact</li><li>Members</li></ul>
</div>

CSS

html, body { margin: 0; border: 0; }
.topbar { 
    background: rgb(113, 113, 113);
    position: fixed;
    display: block; height: 80px; width: 100%;
    text-align: center;
}
.nav {
    list-style: none;
    margin: 0; padding: 0; right: 0px;
    height: 80px;
    position: fixed; padding-right: 35px;
    display: block; width: 900px;
    text-align: right;
    overflow: hidden;
}
.nav > li {
    display: inline-block;
    color: #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    margin: 0 -83px;
    padding: 8px 50px 8px 100px;
    font-weight: bold;
    font-family: Tahoma, Verdana, Arial, sans-serif;
}
.nav > li:nth-child(1) { background-color: red; }
.nav > li:nth-child(2) { background-color: orange; }
.nav > li:nth-child(3) { background-color: green; }
.nav > li:nth-child(4) { background-color: blue; }
.nav > li:nth-child(5) { background-color: violet; }