diff --git a/src/js/components/ContextMenu.js b/src/js/components/ContextMenu.js
index 51cd7773..7704af2c 100755
--- a/src/js/components/ContextMenu.js
+++ b/src/js/components/ContextMenu.js
@@ -151,6 +151,15 @@ class ContextMenu extends React.Component{
 
 		return (			
 			<div className="submenu">
+				<span className="menu-item-wrapper">
+					<a className="menu-item close-submenu" onClick={e => this.setState({submenu_expanded: false})}>
+						<span className="label">
+							<FontAwesome name='close' />
+							&nbsp;
+							Cancel
+						</span>
+					</a>
+				</span>
 				{
 					playlists.map( playlist => {
 						return (
@@ -294,7 +303,7 @@ class ContextMenu extends React.Component{
 								<span key={item.handleClick} className="menu-item-wrapper has-submenu">
 									<a className="menu-item" onClick={e => this[item.handleClick](e)}>
 										<span className="label">{ item.label }</span>
-										<FontAwesome className="submenu-icon" name={this.state.submenu_expanded ? 'caret-up' : 'caret-right'} />
+										<FontAwesome className="submenu-icon" name='caret-right' />
 									</a>
 									{this.state.submenu_expanded ? this.renderPlaylistSubmenu() : null}
 								</span>
@@ -326,7 +335,8 @@ class ContextMenu extends React.Component{
 		var height = 0
 		if (items) height = items.length * 34 // this is an approximation of how tall each menu item is
 
-		var className = "context-menu"
+		var className = "context-menu "+this.props.menu.context
+		if (this.state.submenu_expanded) className += ' submenu-expanded'
 		if (this.props.menu.position_x > (window.innerWidth - 154)) className += ' right-align'
 		if (this.props.menu.position_x > (window.innerWidth - 308)) className += ' right-align-submenu'
 		if (this.props.menu.position_y > (window.innerHeight - height)){
diff --git a/src/scss/components/_context-menu.scss b/src/scss/components/_context-menu.scss
index e5dad016..2991f6b9 100755
--- a/src/scss/components/_context-menu.scss
+++ b/src/scss/components/_context-menu.scss
@@ -8,14 +8,15 @@
 	.liner {
 		background: $dark_grey;
 		color: #FFFFFF;
+		width: 160px;
 
 		&.right-align {
-			margin-left: -140px;
+			margin-left: -160px;
 		}
 
 		&.right-align-submenu .submenu {
 			left: auto !important;
-			right: 140px !important;
+			right: 160px !important;
 		}
 
 		&.bottom-align-submenu .submenu {
@@ -26,7 +27,6 @@
 		.title {
 			display: block;
 			padding: 8px 12px;
-			width: 140px;
 			font-weight: bold;
 			box-sizing: border-box;
 			position: relative;
@@ -72,14 +72,16 @@
 
 		.menu-item-wrapper {
 			display: block;
-			position: relative;
 
 			.menu-item {
 				cursor: pointer;
 				display: block;
 				padding: 8px 12px;
-				width: 140px;
-				box-sizing: border-box;	
+				box-sizing: border-box;
+
+				.notouch &:hover {
+					background: lighten($dark_grey, 5%);
+				}
 			}
 
 			.icon {
@@ -93,18 +95,27 @@
 			}
 
 			.submenu {
-				display: none;
 				position: absolute;
-				left: 140px;
 				top: 0;
-				max-height: 200px;
+				right: 0;
+				bottom: 0;
+				left: 0;
+				min-height: 200px;
 				overflow-y: scroll;			
-				background: lighten($dark_grey, 5%);
+				background: lighten($dark_grey, 10%);
+				z-index: 3;
 
 				.menu-item {
-					width: 140px;
+					width: 100%;
+
+					&.close-submenu {
+						background: $dark_grey;
+						border-top: 0;
+						color: $mid_grey;
+					}
+
 					.notouch &:hover {
-						background: lighten($dark_grey, 10%);
+						background: lighten($dark_grey, 15%);
 					}
 				}
 			}
@@ -112,14 +123,13 @@
 			.menu-item {
 				border-top: 1px solid lighten($dark_grey, 8%);
 			}
+		}
+	}
 
-			&:hover {
-				.menu-item {
-					background: lighten($dark_grey, 5%);
-				}
-				.submenu {
-					display: block;
-				}
+	@include responsive( null, $bp_medium ){
+		.liner {
+			.title {
+				display: none;
 			}
 		}
 	}
@@ -151,30 +161,14 @@
 
 			.title {				
 				padding: 16px 20px;
-				width: 100%;
 				box-sizing: border-box;
 			}
 
 			.menu-item-wrapper {
 				.menu-item {
 					padding: 16px 20px;
-					width: 100%;
 					box-sizing: border-box;
 				}
-
-				.submenu {
-					display: block;
-					position: relative;
-					width: 100%;
-					top: auto;
-					right: auto;
-					bottom: auto;
-					left: auto;
-
-					.menu-item {
-						width: 100%;
-					}
-				}
 			}
 		}
 	}