CLPHP Nav Bar

by mlms13

HTML

<div id="department_horizontal_nav">
    <div>
        <a href="" class="crumb">Center for Leadership</a>
        <ul>
            <li><a href="">Courses</a></li>
            <li>
                <a href="" class="crumb">PERLC</a>
                <ul>
                    <li><a href="">Trainings</a></li>
                    <li><a href="">Resources</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </li>
            <li>
                <a href="">FPHTC</a>
                <ul>
                    <li><a href="">Trainings</a></li>
                    <li><a href="">Resources</a></li>
                    <li><a href="">About</a></li>
                    <li><a href="">Contact</a></li>
                </ul>
            </li>
            <li><a href="">Contact</a></li>
        </ul>
    </div>
</div>

CSS

body {
    font-family: sans-serif;
    font-size: 13px;
}
#department_horizontal_nav {
    box-shadow: 0 0 6px rgba(0,0,0,0.3);
}
#department_horizontal_nav div {
    background: #286;
    background-image: -webkit-linear-gradient(#175, #397);
    box-shadow: inset 0 2px 8px rgba(0,0,0,0.2);
    overflow: hidden;
}
#department_horizontal_nav a {
    color: #175;
    display: none;
    float: left;
    font-weight: bold;
    padding: 8px 14px;
    position: relative;
    text-decoration: none;
}
#department_horizontal_nav a:hover {
    background-image: -webkit-linear-gradient(rgba(255,255,255,0.1), rgba(255,255,255,0.2));
}
#department_horizontal_nav div > .crumb {
    background: #e6eae8;
}
#department_horizontal_nav .crumb, #department_horizontal_nav li .crumb + ul > li > a {
    display: block;
}
#department_horizontal_nav ul {
    float: left;
    list-style: none;
    margin: 0;
    padding: 0;
}
#department_horizontal_nav ul li {
    float: left;
}
#department_horizontal_nav div > ul > li > a {
    background: #d0e6d0;
}
#department_horizontal_nav li li a {
    border-left: 1px solid #2c9470;
    border-right: 1px solid #16805a;
    color: #fff;
    text-shadow: 1px 1px 1px #064;
}
/* arrows on breadcrumbs */
#department_horizontal_nav .crumb {
    padding-right: 6px;
}
#department_horizontal_nav .crumb::after, #department_horizontal_nav .crumb::before {
    border-style: solid;
    border-width: 16px 0 16px 16px;
    border-color: transparent;
    content: "";
    position: absolute;
    right: -16px;
    top: 0;
    z-index: 1;
}
#department_horizontal_nav .crumb::before{
    border-left-color: rgba(100,120,110,0.2);
    right: -18px;
}
#department_horizontal_nav li .crumb::before{
    border-left-color: rgba(40,90,75,0.3);
    right: -19px;
}
#department_horizontal_nav .crumb::after {
    border-left-color: #e6eae8;
}
#department_horizontal_nav li .crumb::after {
    border-left-color: #d0e6d0;
}
#department_horizontal_nav li .crumb,...