Nursing Menu

by mlms13

HTML

<ul>
    <li id="home"><a href="">Home</a></li>
    <li id="about"><a href="">About the College</a>
        
    </li>
    <!--<li><a href="">Research &amp; Centers</a></li>-->
    <li><a href="">Prospective Students</a></li>
    <li><a href="">Current Students</a></li>
    <!--<li><a href="">Academic Programs</a></li>-->
    <!--<li><a href="">Advising</a></li>-->
    <!--<li><a href="">Student Resources</a></li>-->
    <!--<li><a href="">Financial Assistance</a></li>-->
    <li><a href="">Alumni</a></li>
    <li><a href="">Faculty &amp; Staff</a></li>
    <li><a href="">Giving</a></li>
</ul>
<div class="fat-menu">
    
</div>

CSS

body {
    font-family: sans-serif;
    font-size: 14px;
    padding: 24px;
}
ul {
    background: #666;
    background-image: -webkit-linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.3));
    list-style: none;
    overflow: hidden;
}
ul li {
    float: left;
}
ul li a {
    border: 1px solid transparent;
    border-left-color: #888;
    border-right-color: #333;
    color: #fff;
    display: block;
    line-height: 16px;
    padding: 12px 18px;
    text-decoration: none;
    text-shadow: -1px -1px 1px rgba(0,0,0,0.4);
}
ul li a:hover {
    background-color: #444;
    background-image:
        -webkit-radial-gradient(center 120px, ellipse cover, rgba(255,255,255,0.10) 40%, rgba(255,255,255,0.08) 50%, transparent 80%);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.2);
}
#about a:hover {
    background-color: #158;
}
.fat-menu {
    background: #fff;
    border: 1px solid #59c;
    border-top: 6px solid #269;
    box-shadow: 1px 1px 10px rgba(0,0,0,0.4);
    padding: 60px;
}