A Pen by Captain Anonymous.

An-Anonymous-Pen.markdown

An Anonymous Pen

A Pen by Anonasaurus Rex on CodePen.

License.

index.html

<div class="primary-nav">
        <ul class="nav"><li class="nav-selected nav-path-selected"><a href="/" target="_self" class="nav-selected nav-path-selected">Home</a></li><li class=""><a href="/my-vision/" target="_self" class="">My Vision</a></li><li class=""><a href="/about-me/" target="_self" class="">About Me</a></li><li class=""><a href="/cosmetic-services/" target="_self" class="">Cosmetic Services</a><ul><li class=""><a href="/cosmetic-services/mens-services/" target="_self" class="">Men's Services</a><ul><li class=""><a href="/cosmetic-services/mens-services/botox/" target="_self" class="">Botox</a><ul><li class=""><a href="/cosmetic-services/mens-services/botox/gummy-smile/" target="_self" class="">Gummy Smile</a></li></ul></li></ul></li><li class=""><a href="/cosmetic-services/womens-services/" target="_self" class="">Women's Services</a></li></ul></li><li class=""><a href="/gallery/" target="_self" class="">Gallery</a></li><li class=""><a href="/directions/" target="_self" class="">Directions</a></li><li class=""><a href="/contact/" target="_self" class="">Contact</a><ul><li class=""><a href="/contact/schedule-appointment/" target="_self" class="">Schedule an Appointment</a></li></ul></li></ul>    </div><!-- primary-nav -->
</div><!-- branding-->

style.sass

@import "compass"
.primary-nav {
    height: 56px;
    margin: 0;
    padding-top:15px;
    width: 1000px;
    font-family: 'Josefin Sans', sans-serif;
    background: linear-gradient(#cec0a3, #cec0a3) repeat scroll 0 0 transparent;
	
}
.nav {
    list-style: none outside none;
    margin: 0;
    padding-left:15px;
}
.nav li {
    float: left;
    margin: 0 18px 0 -14px;
    padding: 0 0 10px;
    position: relative;
}
.nav a {
    color: black;
    float: left;
    font-size: 1.2em;
    height: 25px;
    padding: 5px 23px;
    text-decoration: none;
}
.nav li.first {
    margin-left: -15px;
}
.nav li:hover > a {
    color: #5a715d;
}
.nav li:hover > ul {
    display: block;
}
.nav ul {
    background: none repeat scroll 0 0 #5d7662;
    border-radius: 5px 5px 5px 5px;
    display: none;
    left: 0;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 35px;
    z-index: 99999;
}
.nav ul li {
    box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
    display: block;
    float: none;
    margin: 0;
    padding: 0;
}
.nav ul li:last-child {
    box-shadow: none;
}
.nav ul a {
    display: block;
    float: none;
    font-size: 1em;
    height: auto;
    line-height: 1;
    padding: 12px;
    text-transform: none;
    white-space: nowrap;
}
:first-child + html .nav ul a {
    height: 10px;
    width: 150px;
}
.nav ul a:hover {
    background: linear-gradient(#58705b, #4b5e4d) repeat scroll 0 0 transparent;
    color: #b4b3a4;
    border-radius: 5px 5px 5px 5px;
}
.nav ul li:first-child a {
    border-radius: 5px 5px 0 0;
}
.nav ul li:first-child a:after {
    border-bottom: 8px solid #5d7662;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    content: "";
    height: 0;
    left: 30px;
    position: absolute;
    top: -8px;
    width: 0;
}
.nav ul li:first-child a:hover:after {
    border-bottom-color: #3d4f42;
}
.ie8 .nav ul li:first-child a:after, .ie9 .nav ul li:first-child a:after {
    border-bottom: 8px solid #5d7662;
}
.ie8 .nav ul li:first-child a:hover:after, .ie9 .nav ul li:first-child a:hover:after {
    border-bottom-color: #ffac9f;
}
.nav ul li:last-child a {
    border-radius: 0 0 5px 5px;
}
.nav:after {
    clear: both;
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    visibility: hidden;
}
* html .nav {
}
:first-child + html .nav {
}

.nav > li > ul li > ul{   /* Third Level & beyond */
    display:none;
    background:#5d7662;
}
.nav  > li > ul li:hover > ul{
    display:block;
    position:absolute;
    left:100%;
    border-left:solid 3px #fff;
    top:0;
    width:auto;
}
.nav > li > ul > li ul > li{
    display:block;
    padding:3px 10px;
    border-top:solid 3px #fff;
    white-space:nowrap;
}
.nav  > li > ul > li ul > li:hover > span{
    color:#fff;
}


@media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){
    nav li a {
        width: 50%;
        font: 400 12px/1.4 'Josefin Sans', sans-serif;
        padding-top: 12px;
        padding-bottom: 12px;
    }
     
    nav li:nth-child(even) a {
        border-right: none;
    }
     
    nav li:nth-child(5) a, nav li:nth-child(6) a {
        border-bottom: 1px solid #fff;
    }
}
 
@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
    nav li a {
        font: 400 11px/1.4 'Cutive', Helvetica, Verdana, Arial, sans-serif;
    }
}

@media only screen and (max-width : 580px),
only screen and (max-device-width : 580px){
.primary-nav {
    clear: both;
    height: 49px;
    margin: 0;
    padding-top:15px;
    font-family: 'Josefin Sans', sans-serif;
    box-shadow: 0 3px 0 #111111, 0 2px 0 #777777;
    width: 1000px;
    border-radius: 5px 5px 5px 5px;
    background: linear-gradient(#000000, #4d5f52) repeat scroll 0 0 transparent;
}