Menu Accordion: Hide/Show on click for sidebar menu items. Works in tandem with coordinated script, posted to my gist account as menu-accordion.js. Full menu can be seen in action here: http://www.leefoil.com/

menu-accordion.scss

.efelle-menu {
	margin: 0;
	padding: 0;
	text-align: center; 
	font-size: 15px;

	li {
		display: block;
		margin: 0;
		width: 100%;

		&.active-state {
			a {
				background: $brand-secondary;
				color: $brand-tertiary;
				max-width: 100%;					
			}
		}
	}

	li.active-state + li a, 
	li:hover + li a,
	li:focus + li a {
		border-top: 1px solid transparent; // hide border of following item if previous is active or hovered
	}

	li:last-child a {
		border-bottom: 1px solid $brand-secondary; // make sure bottom of menu always has border
	}

	a {
		display: block;
		border-top: 1px solid $brand-secondary;
		border-bottom: 1px solid transparent;
		margin: 0 auto;
		padding: 10px 0;
		color: #fff;
		max-width: 270px;

		&:hover,
		&:focus {
			background: $brand-secondary;
			color: $brand-tertiary;
			max-width: 100%;
		}
	}

	// Accordion sub-menu styles
	li.is-parent {
		position: relative;

		button {
			position: absolute;
			display: inline-block;
			border: 0;
			background: url('/graphics/expand-collapse-xl.png') no-repeat top left; 
			margin-left: 15px;
			width: 20px;
			height: 20px;
			content: "";
		}

		&.active-state button,
		&:hover button, 
		&:focus button, 
		a:hover button, 
		a:focus button {
			cursor: pointer;
			background: url('/graphics/expand-collapse-xl.png') no-repeat bottom left; 
		}

		button.expanded {
			background: url('/graphics/expand-collapse-xl.png') no-repeat top right;
		}

		&:hover button.expanded,
		&:focus button.expanded {
			background: url('/graphics/expand-collapse-xl.png') no-repeat bottom right; 				
		}

		&.expanded {
			&> a {
				background: $brand-secondary;
				color: $brand-tertiary;
				max-width: 100%;
			}

			button {
				background: url('/graphics/expand-collapse-xl.png') no-repeat bottom right; 	
			}
		}
	}

	ul {
		-webkit-transition: height .7s ease-out;
		transition: height .7s ease-out;
		background-color: rgba(205,166,72,.5);
		height: 0px;
		visibility: hidden;
		opacity: 0;
		padding: 0;

		&.expanded {
			height: auto;
			visibility: visible;
			opacity: 1;
		}
	}
}