JS-Free Nursing Nav

An implementation of the Nursing navigation that uses CSS :hover and transitions instead of Javascript.

by mlms13

HTML

<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a>
    <div class="menu">
        <ul>
            <li><a>Link</a></li>
            <li><a>Link</a></li>
            <li><a>Link</a></li>
        </ul>
    </div>
</li>
</ul>

CSS

body {
    font: 14px sans-serif;
    padding: 30px;
}
ul#nav {
    background: #666;
    background-image: -webkit-linear-gradient(transparent 10%, rgba(0,0,0,0.3) 98%);
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
    height: 40px;
    list-style: none;
    margin: 0;
    padding: 0;
}
ul#nav > li {
    float: left;
}
ul#nav > li > a {
    border-left: 1px solid #777;
    border-right: 1px solid #333;
    color: #fff;
    display: block;
    line-height: 16px;
    padding: 12px 18px;
    position: relative;
    text-decoration: none;
    text-shadow: -1px -1px 1px rgba(0,0,0,0.4);
    -webkit-transition: all 500ms;
}
ul#nav > li > a:hover, ul#nav > li:hover > a {
    background-color: #333;
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.4);
    -webkit-transition: all 200ms;
}
ul#nav > li > .menu {
    border: 2px solid #888;
    opacity: 0;
    padding: 24px 0;
    position: absolute;
    width: 160px;
    -webkit-transition: all 500ms;
}
ul#nav > li:hover > .menu {
    opacity: 1;
    -webkit-transition: all 200ms;
}
ul#nav