Retro menu with HTML5 and CSS

by gabrieleromanato

HTML

<nav id="menu">
    <ul id="nav-primary">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <ul id="nav-secondary">
        <li><a href="#">Profile</a></li>
        <li><a href="#">Job</a></li>
        <li><a href="#">Work</a></li>
    </ul>
</nav>

CSS

#menu {
    height: 7em;
    font-family: Georgia, serif;
    background:  url(https://lh5.googleusercontent.com/-buqAvHVlFz8/UAA7aDCE3kI/AAAAAAAABDQ/rzdmARKqe1U/s899/menu-retro.png) no-repeat 50% 0;
    color: #fff;
}

#menu #nav-primary {
    float: left;
    height: 100%;
    padding-left: 1em;
}

#menu #nav-secondary {
    float: right;
    height: 100%;
    padding-right: 1em;
}

#menu li {
    float: left;
    height: 100%;
    line-height: 7;
}

#menu a {
    font-size: 90%;
    color: #fff;
    text-decoration: none;
    padding: 0 0.7em;
    text-shadow: 1px 1px 1px #000;
    text-transform: uppercase;
}