Mobile test

by AaronLayton

HTML

<div id="header">
    <div class="logo"><img src="http://www.validatethis.co.uk/rgmobile/rg-logo-small.png" alt="Racing Green" /></div>
    <nav>
        <ul class="jun11Menu">
            <li class="Formal"><a href="/d-formal-7728" title="Formal" class="active">Formal</a></li>
            <li class="Casual"><a href="/d-casual-7729" title="Casual" class="">Casual</a></li>
            <li class="Stylebook"><a href="/StyleBooks" title="Stylebook" class="">Stylebook</a></li>
            <li class="Journal"><a href="/Journal" title="Journal" class="">Journal</a></li>
        </ul>
    </nav>
</div>

CSS

#header { 
    background:#fff;
    height:70px;
    position:relative;
    width:100%;
    -moz-box-shadow: 0 0 10px rgba(0,0,0,0.1);
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.1);
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
#header .logo { 
    position: absolute;
    top:7px;
    left:9px;
}

.jun11Menu { background:#eee;height:30px;left:0;position:absolute;top:40px;width:100%; }
.jun11Menu li a {
    color:#000;
    float:left;
    font-family: "Gill Sans","Gill Sans MT",sans-serif;
    font-size: 14px;
    height:30px;
    line-height:30px;
    text-align:center;
    text-decoration:none;
    text-transform:uppercase;
    width:25%;
}
.jun11Menu li a:hover { background:#ddd; }