JSLESS - Dropdown

by Neviton

HTML

<div class="dropdown" tabindex="0">
	<label for="" class="dropdown-label">DropDown Menu</label>
	<ul class="dropdown-items dropdown-overlap">
		<li><a href="">Item 1</a></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>
	</ul>
</div>

<ul class="dropdown" tabindex="0">
<li class="dropdown-label">placeholder</li>
	<li class="dropdown-items"><a href="">Item 2</a></li>
	<li class="dropdown-items"><a href="">Item 3</a></li>
	<li class="dropdown-items"><a href="">Item 4</a></li>
	<li class="dropdown-items"><a href="">Item 5</a></li>
</ul>

<hr>

SCSS

$text: #777;
$border: #ddd;
$background: #f4f4f4;
* {
	font-family: Arial;
	color: $text;
}
.dropdown {
	position: relative;
	display: inline-block;
	background-color: #fff;
	border: 1px solid $border;
	outline: 0;
	padding: 0;
	margin: 0;

	.dropdown-label {
		background-color: #fff;
		display: block;
		padding: 10px 20px;
	}

	.dropdown-items {
		background-color: #fff;
		display: none;
		list-style-type: none;
		padding: 0;
		margin: 0;
		
		&.dropdown-overlap {
			position: absolute;
			width: 100%;
			z-index: 999;
		}
		
		&, li {
			border-top: 1px solid $border;

			a {
				display: block;
				padding: 10px 20px;
				text-decoration: none;
				&:hover {
					background-color: $background;
				}
			}
		}
	}
	
	&:focus {
		.dropdown-items {
			display: block;
		}
	}
}