Side Navigation Tabs

by mlms13

HTML

<div id="content">
    <nav>
        <ul>
            <li>Why Nursing</li>
            <li class="selected">Why USF</li>
            <li>Why Now</li>
        </ul>
    </nav>
    <section>
        <h1>Welcome</h1>
    </section>
</div>

CSS

body {
    background: #fff;
    font-family: sans-serif;
}
#content {
    margin: 20px auto 0;
    width: 750px;
}
nav {
    float: left;
    width: 150px;
}
nav ul {
    list-style: none;
    margin-top: 30px;
}
nav ul li {
    background: #175;
    border-radius: 6px 0 0 6px;
    box-shadow: 0 0 6px rgba(0,0,0,0.4);
    color: #ddd;
    float: right;
    font-size: 18px;
    margin-bottom: 6px;
    padding: 8px 12px;
    -webkit-transition: all .3s;
}
nav ul li:hover {
    background: #286;
    color: #fff;
    padding-right: 24px;
    -webkit-transition: all .2s;
}
nav ul li.selected {
    background: #efe;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
    color: #064;
    padding: 8px 16px;
    width: 110px;
}
section {
    background: #fff;
    box-shadow: 0 0 12px rgba(0,0,0,0.4);
    float: left;
    min-height: 300px;
    padding: 4px 20px;
    width: 560px;
}
section h1 {
    border-bottom: 1px solid #ddd;
    color: #888;
    display: inline-block;
    font-size: 26px;
    font-family: serif;
    font-style: italic;
}