Evony Drop Down

by alinktothepast

HTML

<ul id="nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">Community
            <ul class="drop">
                <li><a href="#">Recent Reports</a></li>
                <li><a href="#">Forums</a></li>
                <li><a href="#">Alliance Match-up</a></li>
                <li><a href="#">Recent Reports</a></li>
                <li><a href="#">Forums</a></li>
                <li><a href="#">Alliance Match-up</a></li>
            </ul>
            </li>
            <li><a href="#">Resources</a>
                <ul class="drop">
                    <li><a href="#">NPC Farming</a></li>
                    <li><a href="#">Valley Farming</a></li>
                    <li><a href="#">NPC Farming</a></li>
                    <li><a href="#">Valley Farming</a></li>
                    <li><a href="#">NPC Farming</a></li>
                    <li><a href="#">Valley Farming</a></li>
                </ul>
            </li>
            </ul>

CSS

#nav{
    list-style:none;
    font-weight:bold;
    font: normal 40px helvetica;
    margin-bottom: 10px;
    float:left;
    width:900px;
    position: relative;
    z-index: 1px;
    background: -moz-linear-gradient(top, #FFFFFF, #DEA8A8);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#DEA8A8));
    border: solid 0px #000;
    border-radius: 0px 20px 0px 20px;
    -moz-border-radius: 0px 20px 0px 20px;
    -webkit-border-radius: 0px 20px 0px 20px;
    box-shadow: 2px 2px 30px;
}
#nav li{
    float:left;
    padding: 5px;
    margin-right: 75px;
    position:relative;
    text-align: center;
}   
#nav ul li{
    padding: 5px;
    margin-top: 5px;
    font: normal 20px helvetica;
    border: solid 0px #000;
    border-radius: 0px 20px 0px 20px;
    -moz-border-radius: 0px 20px 0px 20px;
    -webkit-border-radius: 0px 20px 0px 20px;
    box-shadow: 10px 10px 300px #E8B19F;
}
#nav a{
    padding:0px;
    color: blue;
    text-decoration:none;
}
#nav a:hover{
    color:#fff;
    text-decoration: none;
}

/*--- DROPDOWN ---*/
#nav ul{
    list-style:none;
    position:absolute;
    z-index: -1;
    margin-top: 4px;
    left:-9999px;
}
#nav ul li{
    padding-top:5px;
    float:none;
    background: -moz-linear-gradient(top, #FFFFFF, #DEA8A8);
    background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#DEA8A8));
}
#nav ul a{
    white-space:nowrap;
}
#nav li:hover ul{
    left:0;
}
#nav li:hover a{
    text-decoration: none;
}
#nav li:hover ul a{
    text-decoration: none;
}
#nav li:hover ul li a:hover{
    text-decoration: none;
}