CodePen

HTML

            
              <div class="Choose" id="Choose"><a href="javascript:dropdown();">CHOOSE</a></div>
<div class="Options" id="Options">
  Option 1<br />
  Option 2<br />
  Option 3<br />
  Option 4<br />
  Option 5<br />
  Option 6<br />
  Option 7<br />
  Option 8<br />
  Option 9<br />
  Option 10<br />
</div>
            
          
!

CSS

            
              body {
  margin:0px; 
}

div.Choose {
	float:right;
	width:30%;
	height:30px;
	background:red;
}

div.Options {
	clear:both;
	background:blue;
	width:25%;
	float:right;
	margin:-500px 4% 0 0;
	transition: margin 2s;
		-moz-transition: margin 2s; /* Firefox 4 */
		-webkit-transition: margin 2s; /* Safari and Chrome */
		-o-transition: margin 2s; /* Opera */
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              function dropdown() {
	if(document.getElementsByClassName("active").length == 1) {
    document.getElementById("Options").style.margin = "-500px 4% 0 0";
    document.getElementsByClassName("Options active")[0].className = "Options";
		
	} else {
	  document.getElementById("Options").style.margin = "-4px 4% 0 0";
    document.getElementsByClassName("Options")[0].className = "Options active";
	}
}
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................