CodePen

HTML

            
              <div id="menu">
  <div id="signUp">
    <ul>
      <li><button>Sign Up</button></li>
    </ul>
  </div>
    
  <div id="show">
    <ul>
      <li><a href="#">Register</a></li>
      <li><a href="#">Login</a></li>
    </ul>
  </div>
</div>
            
          
!

CSS

            
              *{
margin:0px;
padding:0px;
}
a{
text-decoration:none;
}
ul {
list-style-type:none;
}

#menu{
margin:20px auto;
background-color:#CCC;
width:350px;
height:150px;
}
div#signUp{
float:left;
margin-top:30px;
margin-left:20px;
}
div#show{
float:right;
margin-top:30px;
margin-right:20px;
display:none;
position:relative;
width:180px;
}
button{
border-radius:8px;
background-color:#637dae;
color:white;
width:90px;
padding:8px;
cursor:pointer;
}
#show ul{
border-radius:8px;
background-color:white;
  
}

#show ul li:first-child a{
border-bottom:solid 1px #CCC;
padding:8px;
display:block;
}
#show ul li:first-child a:hover{
background-color:#637dae;
color:#FFF;
border-radius:8px 8px 0 0;
}
#show ul li:last-child a{
padding:8px;
display:block;
}
#show ul li:last-child a:hover{
background-color:#637dae;
color:#FFF;
border-radius:0 0 8px 8px;
}
#show:before{
content:'';
position:absolute;
width:20px;
height:20px;
z-index:-1;
left:-10px;
top:10px;
transform:rotate(145deg) skew(20deg);
background:white;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              $(document).ready(function()
{

$("button").click(function()
{
if($(this) .hasClass('signUp-open'))
{
$(this) .removeClass('signUp-open') .addClass('signUp-close') .parents('#menu') .children('#show') .fadeOut();
}
else
{
$(this) .removeClass('signUp-closed') .addClass('signUp-open') .parents('#menu') .children('#show') .fadeIn();
}
});
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................