<style>.stellarnav,.stellarnav li{
position:relative;
line-height:normal
}
.stellarnav{
width:100%;
z-index:9900;position:relative;
}
.stellarnav ul{
margin:0;
padding:0;
text-align:center
}
.stellarnav li{
list-style:none;
display:block;
margin:0;
padding:0;
vertical-align:middle
}
.stellarnav li a{
padding:15px;
display:block;
text-decoration:none;
color:#777;
font-size:inherit;
font-family:inherit;
box-sizing:border-box;
-webkit-transition:all .3s ease-out;
-moz-transition:all .3s ease-out;
transition:all .3s ease-out
}
.stellarnav>ul>li{
display:inline-block
}
.stellarnav>ul>li:hover{background:#4a3501}

.stellarnav>ul>li>a{
padding:20px 40px
}
.stellarnav ul ul{
top:auto;
width:220px;
position:absolute;
z-index:9900;
text-align:left;
display:none;
background:#ddd
}
.stellarnav li li{
display:block;
}
.stellarnav ul ul ul{
top:0;
left:220px
}
.stellarnav>ul>li:hover>ul>li:hover>ul{
opacity:1;
visibility:visible;
top:0;
}
.stellarnav>ul>li.drop-left>ul{
right:0
}
.stellarnav li.drop-left ul ul{
left:auto;
right:220px
}
.stellarnav.light,.stellarnav.light ul ul{
background:rgba(255,255,255,1)
}
.stellarnav.light li a{
color:#000
}
.stellarnav.light .call-btn-mobile,.stellarnav.light .close-menu,.stellarnav.light .location-btn-mobile,.stellarnav.light .menu-toggle{
color:rgba(0,0,0,1)
}
.stellarnav.dark{
background:#2f220e
}
.stellarnav.dark ul ul{
background:#4a3501
}
.stellarnav.dark li a{
color:#FFF
}
.stellarnav.dark .call-btn-mobile,.stellarnav.dark .close-menu,.stellarnav.dark .location-btn-mobile,.stellarnav.dark .menu-toggle{
color:rgba(255,255,255,1)
}
.stellarnav.fixed{
position:fixed;
width:100%;
top:0;
left:0;
z-index:9999
}
body.stellarnav-noscroll-x{
overflow-x:hidden
}
.stellarnav li.has-sub>a:after{
float: right;margin-top:-2px;margin-left: 10px;content: "\203a";color: inherit;font-family: 'FontAwesome';text-align: center;font-size: 150%;vertical-align: middle;-moz-transform: rotate(90deg);-o-transform: rotate(90deg);-webkit-transform: rotate(90deg);
}
.stellarnav li li.has-sub>a:after{
float: right;margin-top: -2px;width: 15px;content: "\203a";color: inherit;font-family: 'icons';font-size: 125%;-moz-transform: rotate(0deg);-o-transform: rotate(0deg);-webkit-transform: rotate(0deg);
}
.stellarnav li.drop-left li.has-sub>a:after{margin-top: -4px;
float:left;
content:'\2039';
font-family:FontAwesome;
margin-right:10px;margin-left:0;
}
.stellarnav.hide-arrows li li.has-sub>a:after,.stellarnav.hide-arrows li.drop-left li.has-sub>a:after,.stellarnav.hide-arrows li.has-sub>a:after{
display:none
}
.stellarnav .dd-toggle{
display:none;
position:absolute;
top:0;
right:0;
padding:0;
width:48px;
height:48px;
text-align:center;
z-index:9999;
border:0
}
.stellarnav .dd-toggle i{
position:absolute;
margin:auto;
top:33%;
left:0;
right:0;
-webkit-transition:transform .3s ease-out;
-moz-transition:transform .3s ease-out;
transition:transform .3s ease-out
}
.stellarnav.mobile>ul>li>a.dd-toggle{
padding:0
}
.stellarnav li.call-btn-mobile,.stellarnav li.location-btn-mobile{
display:none
}
.stellarnav li.open>a.dd-toggle i{
-webkit-transform:rotate(135deg);
-ms-transform:rotate(135deg);
-o-transform:rotate(135deg);
transform:rotate(135deg)
}
.stellarnav .call-btn-mobile,.stellarnav .close-menu,.stellarnav .location-btn-mobile,.stellarnav .menu-toggle{
display:none;
text-transform:uppercase;
text-decoration:none;
color:#777;
padding:15px;
box-sizing:border-box
}
.stellarnav .full{
width:100%
}
.stellarnav .half{
width:50%
}
.stellarnav .third{
width:33%;
text-align:center
}
.stellarnav .location-btn-mobile.third{
text-align:center
}
.stellarnav .location-btn-mobile.half{
text-align:right
}
.stellarnav.light .half,.stellarnav.light .third{
border-left:1px solid rgba(0,0,0,.15)
}
.stellarnav.light.left .half,.stellarnav.light.left .third,.stellarnav.light.right .half,.stellarnav.light.right .third{
border-bottom:1px solid rgba(0,0,0,.15)
}
.stellarnav.light .half:first-child,.stellarnav.light .third:first-child{
border-left:0
}
.stellarnav.dark .half,.stellarnav.dark .third{
border-left:1px solid rgba(255,255,255,.15)
}
.stellarnav.dark.left .half,.stellarnav.dark.left .third,.stellarnav.dark.right .half,.stellarnav.dark.right .third{
border-bottom:1px solid rgba(255,255,255,.15)
}
.stellarnav.dark.left .menu-toggle,.stellarnav.dark.right .menu-toggle,.stellarnav.light.left .menu-toggle,.stellarnav.light.right .menu-toggle{
border-bottom:0
}
.stellarnav.dark .half:first-child,.stellarnav.dark .third:first-child{
border-left:0
}
.stellarnav.mobile .fa{display:inline-block;font:normal normal normal 16px/1 FontAwesome;font-size:inherit;text-rendering:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.stellarnav.mobile .fa-close:before{content:"\2297";}

 

.stellarnav.mobile .fa-bars:before{content:"\2261";}

 

.stellarnav.mobile .fa-plus:before { content: "\002b";}
.stellarnav.mobile,.stellarnav.mobile.fixed{
position:static;
}
.stellarnav.mobile ul{
position:relative;
display:none;
text-align:left;
background:rgba(221,221,221,1)
}
.stellarnav.mobile.active>ul,.stellarnav.mobile>ul>li{
display:block
}
.stellarnav.mobile.active{
padding-bottom:0
}
.stellarnav.mobile>ul>li>a{
padding:15px
}
.stellarnav.mobile ul ul{
position:relative;
opacity:1;
visibility:visible;
width:auto;
display:none;
-moz-transition:none;
-webkit-transition:none;
-o-transition:color 0 ease-in;
transition:none
}
.stellarnav.mobile ul ul ul{
left:auto;
top:auto
}
.stellarnav.mobile li.drop-left ul ul{
right:auto
}
.stellarnav.mobile li a{
border-bottom:1px solid rgba(255,255,255,.15)
}
.stellarnav.mobile li.has-sub a{
padding-right:50px
}
.stellarnav.mobile>ul{
border-top:1px solid rgba(255,255,255,.15)
}
.stellarnav.mobile.light li a{
border-bottom:1px solid rgba(0,0,0,.15)
}
.stellarnav.mobile.light>ul{
border-top:1px solid rgba(0,0,0,.15)
}
.stellarnav.mobile li a.dd-toggle,.stellarnav.mobile.light li a.dd-toggle{
border:0
}
.stellarnav.mobile .call-btn-mobile,.stellarnav.mobile .close-menu,.stellarnav.mobile .dd-toggle,.stellarnav.mobile .location-btn-mobile,.stellarnav.mobile .menu-toggle{
display:inline-block
}
.stellarnav.mobile li.call-btn-mobile{
border-right:1px solid rgba(255,255,255,.1);
box-sizing:border-box
}
.stellarnav.mobile li.call-btn-mobile,.stellarnav.mobile li.location-btn-mobile{
display:inline-block;
width:50%;
text-transform:uppercase;
text-align:center
}
.stellarnav.mobile li.call-btn-mobile.full,.stellarnav.mobile li.location-btn-mobile.full{
display:block;
width:100%;
text-transform:uppercase;
border-right:0;
text-align:left
}
.stellarnav.mobile li.call-btn-mobile i,.stellarnav.mobile li.location-btn-mobile i{
margin-right:5px
}
.stellarnav.mobile.light ul{
background:rgba(255,255,255,1)
}

.stellarnav.mobile.dark ul{
background:#1f1608;z-index:999999;
}
.stellarnav.mobile.dark ul ul{
background:rgba(255,255,255,.08)
}
.stellarnav.mobile.light li.call-btn-mobile{
border-right:1px solid rgba(0,0,0,.1)
}
.stellarnav.mobile.top{
position:absolute;
width:100%;
top:0;
left:0;
z-index:9999
}
.stellarnav.mobile li li.has-sub>a:after,.stellarnav.mobile li.drop-left li.has-sub>a:after,.stellarnav.mobile li.has-sub>a:after{
display:none
}
.stellarnav.mobile.left>ul,.stellarnav.mobile.right>ul{
position:fixed;
top:0;
bottom:0;
width:100%;
max-width:280px;height:auto;
overflow-x:hidden;
overflow-y:auto;
-webkit-overflow-scrolling:touch
}
.stellarnav.mobile.right>ul{
right:0
}
.stellarnav.mobile.left .close-menu,.stellarnav.mobile.right .close-menu{
display:inline-block;
text-align:right
}
.stellarnav.mobile.left>ul{
left:0
}
.stellarnav.mobile.left .call-btn-mobile.half,.stellarnav.mobile.left .call-btn-mobile.third,.stellarnav.mobile.left .close-menu.half,.stellarnav.mobile.left .close-menu.third,.stellarnav.mobile.left .location-btn-mobile.half,.stellarnav.mobile.left .location-btn-mobile.third,.stellarnav.mobile.right .call-btn-mobile.half,.stellarnav.mobile.right .call-btn-mobile.third,.stellarnav.mobile.right .close-menu.half,.stellarnav.mobile.right .close-menu.third,.stellarnav.mobile.right .location-btn-mobile.half,.stellarnav.mobile.right .location-btn-mobile.third{
text-align:center
}
.stellarnav.mobile.left .menu-toggle.half,.stellarnav.mobile.left .menu-toggle.third,.stellarnav.mobile.right .menu-toggle.half,.stellarnav.mobile.right .menu-toggle.third{
text-align:left
}
.stellarnav.mobile.left .close-menu.third span,.stellarnav.mobile.right .close-menu.third span{
display:none
}
@media only screen and (max-width :1023px){
.stellarnav{
overflow:hidden;
display:block
}
.stellarnav ul{
position:relative;
display:none
}
}
@media only screen and (max-width :420px){
.stellarnav.mobile .call-btn-mobile.third span,.stellarnav.mobile .location-btn-mobile.third span{
display:none
}
}

</style>
<script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'></script>

<script type="text/javascript"> //<![CDATA[
!function(a){a.fn.stellarNav=function(n,i,s){nav=a(this),i=a(window).width();var e=a.extend({theme:"plain",breakpoint:1023,phoneBtn:!1,locationBtn:!1,sticky:!1,position:"static",showArrows:!0,closeBtn:!1,scrollbarFix:!1},n);return this.each(function(){function n(){var n=window.innerWidth;s>=n?(d(),nav.addClass("mobile"),nav.removeClass("desktop"),!nav.hasClass("active")&&nav.find("ul:first").is(":visible")&&nav.find("ul:first").hide()):(nav.addClass("desktop"),nav.removeClass("mobile"),nav.hasClass("active")&&nav.removeClass("active"),!nav.hasClass("active")&&nav.find("ul:first").is(":hidden")&&nav.find("ul:first").show(),a("li.open").removeClass("open").find("ul:visible").hide(),d(),v())}
if(("light"==e.theme||"dark"==e.theme)&&nav.addClass(e.theme),e.breakpoint&&(s=e.breakpoint),e.phoneBtn&&e.locationBtn)var t="third";else if(e.phoneBtn||e.locationBtn)var t="half";else var t="full";if(nav.prepend('<a href="#" class="menu-toggle '+t+'"><i class="fa fa-bars"></i> Menu</a>'),e.phoneBtn&&"right"!=e.position&&"left"!=e.position){var l='<a href="tel:'+e.phoneBtn+'" class="call-btn-mobile '+t+'"><i class="fa fa-phone"></i> <span>Call us</span></a>';nav.find("a.menu-toggle").after(l)}

 

if(e.locationBtn&&"right"!=e.position&&"left"!=e.position){var l='<a href="'+e.locationBtn+'" class="location-btn-mobile '+t+'" target="_blank"><i class="fa fa-map-marker"></i> <span>Location</span></a>';nav.find("a.menu-toggle").after(l)}
if(e.sticky&&(navPos=nav.offset().top,i>=s&&a(window).bind("scroll",function(){a(window).scrollTop()>navPos?nav.addClass("fixed"):nav.removeClass("fixed")})),"top"==e.position&&nav.addClass("top"),"left"==e.position||"right"==e.position){var o='<a href="#" class="close-menu '+t+'"><i class="fa fa-close"></i> <span>Close</span></a>',f='<a href="tel:'+e.phoneBtn+'" class="call-btn-mobile '+t+'"><i class="fa fa-phone"></i></a>',r='<a href="'+e.locationBtn+'" class="location-btn-mobile '+t+'" target="_blank"><i class="fa fa-map-marker"></i></a>';nav.find("ul:first").prepend(o),e.locationBtn&&nav.find("ul:first").prepend(r),e.phoneBtn&&nav.find("ul:first").prepend(f)}"right"==e.position&&nav.addClass("right"),"left"==e.position&&nav.addClass("left"),e.showArrows||nav.addClass("hide-arrows"),e.closeBtn&&"right"!=e.position&&"left"!=e.position&&nav.find("ul:first").append('<li><a href="#" class="close-menu"><i class="fa fa-close"></i> Close Menu</a></li>'),e.scrollbarFix&&a("body").addClass("stellarnav-noscroll-x"),a(".menu-toggle").on("click",function(n){n.preventDefault(),"left"==e.position||"right"==e.position?(nav.find("ul:first").stop(!0,!0).fadeToggle(250),nav.toggleClass("active"),nav.hasClass("active")&&nav.hasClass("mobile")&&a(document).on("click",function(n){nav.hasClass("mobile")&&(a(n.target).closest(nav).length||(nav.find("ul:first").stop(!0,!0).fadeOut(250),nav.removeClass("active")))})):(nav.find("ul:first").stop(!0,!0).slideToggle(250),nav.toggleClass("active"))}),a(".close-menu").click(function(){nav.removeClass("active"),"left"==e.position||"right"==e.position?nav.find("ul:first").stop(!0,!0).fadeToggle(250):nav.find("ul:first").stop(!0,!0).slideUp(250).toggleClass("active")}),nav.find("li a").each(function(){a(this).next().length>0&&a(this).parent("li").addClass("has-sub").append('<a class="dd-toggle" href="#"><i class="fa fa-plus"></i></a>')}),nav.find("li .dd-toggle").on("click",function(n){n.preventDefault(),a(this).parent("li").children("ul").stop(!0,!0).slideToggle(250),a(this).parent("li").toggleClass("open")});var d=function(){nav.find("li").unbind("mouseenter"),nav.find("li").unbind("mouseleave")},v=function(){nav.find("li").on("mouseenter",function(){a(this).addClass("hover"),a(this).children("ul").stop(!0,!0).slideDown(250)}),nav.find("li").on("mouseleave",function(){a(this).removeClass("hover"),a(this).children("ul").stop(!0,!0).slideUp(250)})};n(),a(window).on("resize",function(){n()})})}}(jQuery); //]]>
</script>

<div id="main-nav" class="stellarnav">
<ul>
<li><a href="">Dropdown</a>
<ul>
<li><a href="#">How deep?</a>
<ul>
<li><a href="#">Deep</a>
<ul>
<li><a href="#">Even deeper</a>
<ul>
<li><li><a href="#">Item</a></li></li>
<li><li><a href="#">Item</a></li></li>
<li><li><a href="#">Item</a></li></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Here's a very long item. It can be as long as you want</a></li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="">Item 2</a></li>
<li><a href="">Item 3</a></li>
<li><a href="">Item 4</a></li>
<li><a href="">Item 5</a></li>
<li><a href="">Item 6</a></li>
<li class="drop-left"><a href="">Drop Left</a>
<ul>
<li><a href="#">How deep?</a>
<ul>
<li><a href="#">Deep</a>
<ul>
<li><a href="#">Even deeper</a>
<ul>
<li><li><a href="#">Item</a></li></li>
<li><li><a href="#">Item</a></li></li>
<li><li><a href="#">Item</a></li></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
<li><a href="#">Item</a></li>
</ul>
</li>
</ul>
</div>

<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery('.stellarnav').stellarNav({
theme: 'dark',
position: 'left'
});
});
</script>