toggle.html

<script src="toggle.js"></script>
<style>
	body { font-family: 'Segoe UI', Tahoma, sans-serif; width: 300px; margin: 0; padding: 0; -webkit-user-select: none; }
	ul, li { list-style: none; margin: 0; padding: 0; }
	li { cursor: pointer; padding: 10px; font-size: 15px; margin: 5px 0; color: #999; border-left: 3px solid transparent; -webkit-transition: all 0.3s; }
	li:hover { color: #555; border-left: 6px solid #555; }
	li:active, li.active { color: #000; border-left: 6px solid #000; }
	ul li ul { overflow: hidden; }
	ul li ul li {
		float: left;
		border: 1px solid #999;
		border-radius: 3px;
		margin-left: 3px;
		margin-top: 10px;
		font-size: 13px;
	}
</style>
<ul>
	<li>Toggle Keyboard 
		<ul>
			<li id="toggleOn">Always On</li>
			<li id="toggleDemand">On-Demand</li>
			<li id="toggleOff">Turn Off</li>
		</ul>
	</li>
	<li id="goToUrl">Open URL bar</li>
	<li id="settings">Open Virtual Keyboard Settings</li>
</ul>