Runat Web Services

HTML

<div id="headWrapper">
    <div class="crossone">
    </div>
    
    
    <h1 class="header">Runat Web Services</h1>
<ul class="nav">
    <li><a href="#">home</a></li>
    <li><a href="#">about</a></li>
    <li><a href="#">services</a>
        <ul>
            <li><a href="#">web hosting</a></li>
            <li><a href="#">web design</a></li>
            <li><a href="#">web maintenance</a></li>
        </ul>
    </li>
    <li><a href="#">contact</a></li>
</ul>
    <div class="crosstwo">
    </div>
    <div class="intro">
    <p>
        Welcome to Runat!  We offer a wide range of web services.  Our servers are well-equipped to handle what your business requires.  Large clientele and inventory databases can easily be stored and used with our <a href="#">Premium Mass Storage Package</a>.
        </p>

    </div>

CSS

/* ----- HEADER ----- */

body
{
    background: -moz-linear-gradient(45deg, #013D72, #D66C63);
    background: -webkit-gradient(linear, left top, right bottom, from(#013D72), to(#D66C63));
}
#headWrapper {
    margin: auto;
    width: 980px;
    background: -moz-linear-gradient(top, #BFBFBF, #CAAE8D);
    background: -webkit-gradient(linear, left top, right bottom, from(#BFBFBF), to(#CAAE8D));
}
.header {
    font-size: 72px;
    font-family: sans-serif;
    color: #5C7262;
    letter-spacing: -1px;
}


/* ----- NAVIGATION MENU ------- */


.nav {
    background-color: #5C7262;
    float: left;
    list-style: none;
    margin: auto;
    position: relative;
    width: 100%;
}
.nav li {
    float: left;
    padding-right: 100px;
    position: relative;
    
}
.nav ul {
    float: none;
    left: -9999px;
    list-style: none;
    position: absolute;
    z-index: 2;
}
.nav ul li {
    background-color: #5C7262;
    float: none;
    width: 20%;
}
.nav a{
    color: #FFF;
    text-decoration:none;
}
.nav a:hover{
    color: #FFF;
    text-decoration: underline;
}
.nav ul a {
    white-space: nowrap;
}
.nav li:hover ul {
    left: 0;
}
.nav li:hover a{
    text-decoration: underline;
}
.nav li:hover ul a{
    text-decoration: none;
}
.nav li:hover ul li a:hover{
    text-decoration: underline;
}
    
/* ----- CONTENT AREA ----- */
    
.intro {
    background-color: #FFF;
    float: left;
    position: relative;
}
p {
    margin-top: 30px;
    color: #000;
}

.crossone
{
width:400px;
height:3px;
background: #000;
position:relative;
animation-name:crossone;
animation-duration:5s;
/* Firefox */
-moz-animation-name:crossone;
-moz-animation-duration:5s;
/* Safari and Chrome */
-webkit-animation-name:crossone;
-webkit-animation-duration:5s;
}

@-webkit-keyframes crossone
{
from {left:0px;}
to {left:600px;}
}
.crosstwo
{
width:400px;
height:3px;
background: #000;
position:relative;
animation-name:crosstwo;
animation-duration:5s;
/* Firefox...