Creating a quick dropdown list with minimal Jquery, Markup, and SCSS

Quick Dropdown Creation

********* SCSS STYLING **********

.dropdown-list {
  border: 1px solid #ddd;
	max-width: 600px;
	width: 100%;
	margin: 15px auto;
	background: #FFF;
	height: 36px;
	overflow: hidden;
	position: relative;
	cursor: pointer;
	@include border-radius(5px);
	@include box-shadow(0 2px 7px -4px black);
	p {
		margin: 0;
		font-weight: 700;
		padding: 7px;
		&:after {
			content: '';
			display: block;
			position: absolute;
			top: 15px;
			right: 15px;
			border: 6px solid rgba(0, 0, 0, 0);
			border-top: 8px solid #000;
		}
	}
	.dropdown-content {
		position: absolute;
		width: 100%;
		background: #FFF;
		z-index: 999;
		height: 160px;
		overflow: auto;
		margin-top: -2px;
		@include border-radius(0 0 5px 5px);
		@include box-shadow(0 2px 9px -5px black);
	}
	a {
		display: block;
		padding: 4px 10px;
		color: #636A7F;
		text-decoration: none;
		font-weight: 500;
		font-size: 14px;
	}

	&.open {
		@include border-radius(5px 5px 0 0);
		overflow: visible;
		.dropdown-content {
			display: block;
			visibility: visible;
		}
	}
}

********* HTML MARKUP **********

<div class="dropdown-list">
  <p>Select a chapter here</p>
  <div class="dropdown-content">
    <a href="#">...</a>
  </div>
</div>

********* JQUERY SCRIPT **********

$('.dropdown-list').click(function(){
  $(this).toggleClass('open');
});