Allegro WD

by alinktothepast

HTML

<div class="transbox1">
    <h1>Allegro</h1>
    <h2>Web Design</h2>
</div>

<div class="transbox2">
</div>

<div class="transbox3">
    <ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a>
            <ul>
                <li><a href="#">Mission Statement</a></li>
                <li><a href="#">How It Works</a></li>
            </ul>
        </li>
        <li><a href="#">Resources</a>
            <ul>
                <li><a href="#">Evony Map</a></li>
                <li><a href="#">Evony States</a></li>
                <li><a href="#">Alliances</a></li>
                <li><a href="#">Historic/Capital Cities</a></li>
            </ul>
    </li>
        <li><a href="#">Community</a>
            <ul>
                <li><a href="#">Forums</a></li>
                <li><a href="#">Alliance Classifieds</a></li>
                <li><a href="#">FAQ</a></li>
            </ul>
        </li>
        <li><a href="#">Contact Us</a>
            <ul>
                <li><a href="#">Leave Feedback</a></li>
                <li><a href="#">Support/FAQ</a></li>
                <li><a href="#">Donate</a></li>
            </ul>
        </li>
    </ul>
</div>

CSS

<style type="text/css">
body
{
    background: #FFF;
}

div.transbox1
{
    position: absolute;
    left: 25px;
    top: 25px;
    width: 1000px;
    height: 200px;
    background-color: #90C47F;
}
h1
{
    font: normal 150px Arial;
    font-style: oblique;
    text-align: right;
    margin-top: 20px;
    color: #CEFFC9;
}
h1:hover
{
    color: #E8FFE6;
}
h2
{
    font: normal 50px Arial;
    font-style: oblique;
    text-align: right;
    margin-top: 20px;
    color: #CEFFC9;
}
div.transbox2
{
    position: absolute;
    left: 25px;
    top: 225px;
    width: 998px;
    height: 550px;
    background-color: #CBB300;
    border: solid 2px #90C47F;
    opacity: 0.1;
    filter:alpha(opacity=10);
}
div.transbox3
{
    position: absolute;
    left: 37px;
    top: 37px;
    width: 250px;
    height: 200px;
    border-style: none solid double none;
    background-color: #77DB96;
    box-shadow: -2px -2px #000;
    -moz-box-shadow: -2px -2px #000;
    -webkit-box-shadow: -2px -2px #000;
    -khtml-box-shadow: -2px -2px #000;
}
#nav
{
    list-style: none;
    font: normal 21px helvetica;
    float: left;
    width: 100%;
}
#nav li
{
    margin-right: 5px;
    position: relative;
}
#nav a{
    display:block;
    padding:7px;
    color:#000FF;
    background:#77DB96;
    text-decoration:none;
}
#nav a:hover{
    color:#000;
    background:#7DD1C2;
    text-decoration:underline;
}
#nav ul
{
    background: #7DD1C2;
    list-style: none;
    position: absolute;
    left: -9999px;
}
#nav ul li
{
    padding: 2px;
    float: none;
}
#nav ul a
{
    white-space: nowrap;
}
#nav li:hover ul
{
    background: #7DD1C2;
    border: solid 1px #000;
    left: 245px;
    top: 0px;
    padding: 1px;
}
#nav li:hover a
{
    background: #D0DB83;
    text-decoration: underline;
}
#nav li:hover ul a
{
    background: #7DD1C2;
    text-decoration: none;
}
#nav li:hover ul li a:hover
{
    background: #D0DB83;
    text-decoration: underline;
}
</style>