HDSound.us Menu Bar

Menu bar for HDSound.us

by Troy Alford

HTML

<div class="site-header">
    <a href="/" class="logo"></a>
    <ul class="top-nav">
        <li><a href="/">Home</a>
        </li><li><a href="/products.html">Products</a>
        </li><li><a href="/whyhdsound.html">Why HDSound</a>
        </li><li><a href="/soundadvice.html">Sound Advice</a>
        </li><li> <a href="/contactus.html">Contact Us</a></li>
    </ul>
</div>
<div class="content">
    I love you, Alissa!
</div>
<div class="site-footer">
    <ul class="bottom-nav">
        <li><a href="/">HDSound.us</a>
        </li><li><a href="/products.html">Products</a>
        </li><li><a href="/whyhdsound.html">Why HDSound</a>
        </li><li><a href="/soundadvice.html">Sound Advice</a>
        </li><li><a href="/contactus.html">Contact Us</a></li>
    </ul>
</div>
<div class="copyright">&copy; 2013 HDSound.us | All Rights Reserved</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Oxygen:400,700);
body { 
    background-image: url(http://hdsound.us/test/images/greytexture.png); 
    font-family: Oxygen, Arial, sans-serif;
}
div.site-header, div.site-footer, div.content, div.copyright {
    box-sizing: border-box;
    margin: 0 auto; width: 960px;
    position: relative;
}
div.site-header {
    background: #fff url(http://hdsound.us/images/hdsoundbanner.jpg) top left no-repeat;
    border: 1px solid #ccc; border-bottom: none;
    padding-top: 130px;
    border-radius: 25px 25px 0 0;
    z-index: 1;
}
a.logo {
    background: transparent url(http://hdsound.us/images/LogoHDSound.png) center center no-repeat;
    content: '';
    display: inline-block; height: 118px; width: 175px;
    position: absolute; top: 15px; left: 25px;
}
ul.top-nav {
    background-color: #00008B;
    display: block;
    list-style: none;
    padding: 5px 10px;
    box-shadow: 0px 10px 15px #000;
}
ul.top-nav > li {
    border-radius: 3px;
    border: 1px solid #000;
    border-color: #00468C #000 #000 #00468C;
    background-image: -o-linear-gradient(top, rgb(5, 0, 195) 0%, rgb(0, 2, 98) 100%);
    background-image: -moz-linear-gradient(top, rgb(5, 0, 195) 0%, rgb(0, 2, 98) 100%);
    background-image: -webkit-linear-gradient(top, rgb(5, 0, 195) 0%, rgb(0, 2, 98) 100%);
    background-image: -ms-linear-gradient(top, rgb(5, 0, 195) 0%, rgb(0, 2, 98) 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgb(5, 0, 195)), color-stop(1, rgb(0, 2, 98)));
    background-image: linear-gradient(top, rgb(5, 0, 195) 0%, rgb(0, 2, 98) 100%);
    display: inline-block;
    margin: 0; padding: 0;
}
ul.top-nav > li > a {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 3px;
}
ul.top-nav > li:hover {
    -o-box-shadow: 0 0 5px #00ACAC;
    -moz-box-shadow: 0 0 5px #00ACAC;
    -webkit-box-shadow: 0 0 5px #00ACAC;
    -ms-box-shadow: 0 0 5px #00ACAC;
    box-shadow: 0 0 5px...