Cacher is the code snippet organizer for pro developers

/* Nav
------------------------------- */

.site-nav li{
	width:100%;
	display: block;
}

.site-nav > :first-child a{
	padding:0 0 8px 0;
}

.site-nav li a{
	font-size: 1rem;
	padding:10px 0 8px 0;
	border-bottom:1px dotted #000;
	text-transform: uppercase;
}

.site-nav__link span{
	position:absolute;
	top:10px;
	right:0px;
	margin-right: 0px;
	color: #ccc;
}

.site-nav__sub-nav{
	margin: 0;
	padding-bottom: 10px;
	display: none;
	border-bottom:
	1px dotted #000;
}

.site-nav__sub-nav li a{
	border:none;
	text-transform:lowercase;
	padding:5px 0 3px 0;
	line-height: 15px;
} 

.dropdown-toggle{
	position:relative;
	cursor: pointer;
	border-color:#000;
	-webkit-transition:all .6s ease-out;
	-moz-transition:all .6s ease-out;
	-o-transition:all .6s
	ease-out; transition:all .6s ease-out;
}

.bold-link{
	font-weight: bold;
}

.collapse{
	display: none;
}

.expand{
	display: block;
}

.dropped{
	border-color: transparent;
	padding-bottom: 0;
}

.dropped .collapse{
	display:none;
}

.dropped .expand{
	display:none;
}
.dropped .collapse{
	display:block;
}

.nav-border{
	border-top:1px dotted #000;
}

.nav-border > :first-child a{
	padding-top: 10px;
}

.site-header--text-links{
	margin-bottom:7px;
}

<ul class="mobile-hide site-nav {% if collection and collection.title != "Signature Series" %}nav-border{% elsif product and product.type != "Signature Series" %}nav-border{% elsif template == 'cart' %}nav-border{% elsif url contains 'blog' %}nav-border{% else %}{% endif %}" id="AccessibleNav">
  {% for link in linklists.main-menu.links %}
    {% assign child_list_handle = link.title | handleize %}
    {% if linklists[child_list_handle].links != blank %}
      <li class="site-nav--has-dropdown{% if link.active %} site-nav--active{% endif %}" aria-haspopup="true">
        <a class="dropdown-toggle site-nav__link{% if link.url contains 'collections' %} bold-link{% else %}{% endif %}" >{{ link.title }}<span class="expand">+</span><span class="collapse">&ndash;</span></a>
        <ul class="site-nav__sub-nav">
          {% for childlink in linklists[child_list_handle].links %}
            <li{% if childlink.active %} class="site-nav--active"{% endif %}>
              <a href="{{ childlink.url }}" class="site-nav__link">{{ childlink.title | escape }}</a>
            </li>
          {% endfor %}
        </ul>
      </li>
    {% else %}
      <li {% if link.active %}class="site-nav--active"{% endif %}>
        <a href="{{ link.url }}" class="site-nav__link{% if link.url contains 'collections' %} bold-link{% elsif link.url contains 't-shirts' %} bold-link{% elsif link.url contains 'gift' %} bold-link{% else %}{% endif %}" >{{ link.title }}</a>
      </li>
    {% endif %}
  {% endfor %}
</ul>

/*============================================
  Add a toggleable dropdown for sub
============================================*/

$(document).ready(function(){
  $('.dropdown-toggle').click(function(){
    $('.site-nav__sub-nav').slideToggle("slow");
    $('.dropdown-toggle').toggleClass('dropped');
  });
});

This is a sidebar nav that was built for Upside Down Grin, it's a bit better than Tattly's.