Absolutely Positioned Dropdown Menu

Created specifically for stackoverflow question http://stackoverflow.com/questions/17606079/allow-absolutely-positioned-element-to-be-wider-than-parent-absolutely-positione

by ErikE

HTML

<div id="controls">
	<h1>Controls 1</h1>
	<h1 id="size" class="poplinks button">
		Size <a href="#" class="button selected" title="small"><img src="https://www.53.com/resources/skins/cm/img/icons/slider-thumb-1.png"></a> <a href="#" class="button" title="medium"><img src="https://www.53.com/resources/skins/cm/img/icons/slider-thumb-2.png"></a> <a href="#" class="button" title="large"><img src="https://www.53.com/resources/skins/cm/img/icons/slider-thumb-3.png"></a>
	</h1>
</div>

CSS

html, body, div, p, form, img, h1, h2, h3, h4, h5 {
	border:none;
	padding:0;
	margin:0;
}
html {
	font-family: Calibri, Verdana, Arial, sans serif;
	font-size:0.9em;
}
html, body {
	height:100%;
}

#controls, #docs, #pages {
	position:absolute;
	overflow:auto;
	height:100%;
	text-align:center;
	-moz-user-select:none;
	-webkit-user-select:none;
}
#controls {
	width:60px;
	top:0;
	left:0;
	background-color:buttonface;
	overflow:auto;
}
h1 {
	font-weight:bold;
	font-size:1em;
}

#size {
	width:48px;
	text-align:center;
	position:absolute;
	bottom:0;
	right:2px;
}
#size:hover {
    width:auto;
}

/* styling elements as buttons */
.button {
	display:inline-block;
	background-color:buttonface;
	border-color:buttonhighlight buttonshadow buttonshadow buttonhighlight;
	border-radius:4px 4px 4px 4px;
	border-width:2px;
	border-style:solid;
	margin:1px 1px 3px 1px;
	padding:1px 1px 1px 1px;
	outline:none;
}
.button:link, a.button:visited {
}
.button:hover, a.button:focus {
	background-color:#ddddff;
}
.button.selected {
	border-color:buttonshadow;
	border-width:1px;
	padding:3px 2px 1px 2px;
}
.button.selected:hover, .button.poplinks:hover {
	background-color:buttonface;
}
.button img {
	vertical-align:middle;
}

.poplinks:hover {
	width:auto;
}
.poplinks a {
	display:none;
}
.poplinks:hover a {
	display:inline-block;
}

JavaScript

(function() {
	function sortChange(e) {
		var el = $(this);
		if (el.hasClass('selected')) {
			return false;
		}
		el
			.addClass('selected')
			.blur()		
			.siblings()
			.removeClass('selected');
		return false;
	}
	
	$(document).on('ready', function() {
		$('#controls').on('click', 'a', sortChange);
	});

	return {};
}());