This may be rather basic, but I wanted to experiment and learn with some of the upcoming CSS3 techniques. I wasn't able to come up with an HTML/CSS only solution, and I had to work longer than I'd like to admit to get to a point where this menu works as intended on desktop or mobile.The main lesson I learned is forget about using :hover to control actions. It's worthless on mobile, and having the function on click in desktop isn't that bad, and is probably the better practice anyway.I haven't tested in a lot of env, but more than a few. It seems to work pretty well in modern browsers. Let me know how I can improve!GitHubWorking demo//click to open menu$('.follow button').click(function(){    $('.addClass').toggleClass(profile-container);});/*RESET*/ /* http://meyerweb.com/eric/tools/css/reset/     v2.0 | 20110126    License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video {  margin: 0;  padding: 0;  border: 0;  vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section {  display: block; } body {  line-height: 1; } ol, ul {  list-style: none; } blockquote, q {  quotes: none; } blockquote:before, blockquote:after, q:before, q:after {  content: '';  content: none; } table {  border-collapse: collapse;  border-spacing: 0; } *{  letter-spacing: normal; }/* END RESET *//*Disables text selection*/body{ -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; display: table; height: 100%; width: 100%; background-image: url(https://i.imgsafe.org/100dde0.png); }/* Text Center class */.center{ text-align: center;}/*Class that centers img elements in their container*/img.centerImg{ display: block; margin: 0 auto;}/*profileDropdown*/ /* PROFILE STYLES */ ul, li {     margin: 0;     padding: 0;     list-style-type: none; } .container {     margin: 0px auto 0;     width: 378px; } .profile-container {     position: relative;     width: 378px;     float: left; } .profile {  width: 370px;     background: #f6f6f6;     float: left;     padding: 4px;     border-radius: 3px;     -o-border-radius: 3px;     -ms-border-radius: 3px;     -moz-border-radius: 3px;     -webkit-border-radius: 3px;     -webkit-transition: all 0.2s ease-in-out;     -moz-transition: all 0.2s ease-in-out;     -ms-transition: all 0.2s ease-in-out;     -o-transition: all 0.2s ease-in-out;     transition: all 0.2s ease-in-out; } .avatar img {     display: block;     border-radius: 5px;     -o-border-radius: 5px;     -ms-border-radius: 5px;     -moz-border-radius: 5px;     -webkit-border-radius: 5px; } #portraitCaption{  font-style: italic;  color: #b9b9b9;  font-size: .75em; } .follow {     margin: 0px 0 0 0; } .follow button {     display: block;     width: 100%;     border: 0;     background: #268cde;     color: white;     font-weight: bold;     font-size: 1.25em;     padding: 7px 0;     margin: 0;     border-radius: 3px;     -o-border-radius: 3px;     -ms-border-radius: 3px;     -moz-border-radius: 3px;     -webkit-border-radius: 3px;     -webkit-transition: all 0.2s ease-in-out;     -moz-transition: all 0.2s ease-in-out;     -ms-transition: all 0.2s ease-in-out;     -o-transition: all 0.2s ease-in-out;     transition: all 0.2s ease-in-out;     cursor: pointer; } .follow button:hover {     background: #3096e8; } .follow button:active {     background: #2085d6; } .profile-list {     overflow: hidden;     width: 100%;     box-sizing: border-box;     color: #767b7e;     font-size: 13px; } .profile-list li {     cursor: pointer;     background: #ffffff;     border-top: 1px solid #e5e6e6; } .profile-list li:last-child {       border-radius: 0 0 3px 3px;;     -o-border-radius: 0 0 3px 3px;     -ms-border-radius: 0 0 3px 3px;     -moz-border-radius: 0 0 3px 3px;     -webkit-border-radius: 0 0 3px 3px; } .profile-list .profile {     border-radius: 3px 3px 0 0;     position: relative; } .profile-list li {     -webkit-transform-origin: 50% 0%;     -o-transform-origin: 50% 0%;     transform-origin: 50% 0%;     -webkit-transform: perspective(60px) rotateX(-90deg);     -o-transform: perspective(60px) rotateX(-90deg);     transform: perspective(60px) rotateX(-90deg);     -moz-box-shadow: 0px 2px 10px rgba(0,0,0,0.05); } .profile-list li a{  display: block;  padding: 15px 10px; } .profile-container .profile-list .fourth {     transition-delay: 0.6s;     -o-transition-delay: 0.6s;     transition-delay: 0.6s; }  .profile-list .first {     -webkit-transition: 0.2s linear 0.8s;     -o-transition: 0.2s linear 0.8s;     transition: 0.2s linear 0.8s; } .profile-list .second {     -webkit-transition: 0.2s linear 0.6s;     -o-transition: 0.2s linear 0.6s;     transition: 0.2s linear 0.6s; } .profile-list .third {     -webkit-transition: 0.2s linear 0.4s;     -o-transition: 0.2s linear 0.4s;     transition: 0.2s linear 0.4s; } .profile-list .fourth {     -webkit-transition: 0.2s linear 0.2s;     -o-transition: 0.2s linear 0.2s;     transition: 0.2s linear 0.2s; } .profile-container .profile-list li {     -webkit-transform: perspective(350px) rotateX(0deg);     -o-transform: perspective(350px) rotateX(0deg);     transform: perspective(350px) rotateX(0deg);     -webkit-transition: 0.2s linear 0s;     -o-transition: 0.2s linear 0s;     transition: 0.2s linear 0s; } .profile-container .profile-list .second {     -webkit-transition-delay: 0.2s;     -o-transition-delay: 0.2s;     transition-delay: 0.2s; } .profile-container .profile-list .third {     -webkit-transition-delay: 0.4s;     -o-transition-delay: 0.4s;     transition-delay: 0.4s; } .profile-list li a{  color: #268CDE;  text-decoration: none;  text-transform: uppercase;  letter-spacing: 2px; } .follow p{  text-transform: uppercase;  font-family: Times New Roman, Serif;  font-size: 1.25em; }  .profile-list li a:hover{  background-color: #e0e0e0; }<script src=https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script>!DOCTYPE HTML><html lang=en-US> <head>  <meta CHARSET=UTF-8>  <meta name=viewport content=width=device-width, initial-scale=1>    <title>Title</title>  <meta name=Keywords content=>  <meta name=Description content=>   <link rel=stylesheet href=css/style.css> </head> <body id=profileDropdown>  <div class=container>   <div class=profile>    <img id=profilePicture class=avatar src=# alt=Your Name Portrait height=416 width=370 >    <span id=portraitCaption>Your Name</span>   </div><!-- END PROFILE SECTION -->   <div class=addClass>    <div class=follow><button id=dropdownButton>Follow</button></div>      <nav id=dropDown class=profile-list>      <ul class=center>       <li id=gitHubProfile class=first >        <a href=https://github.com/agraymd title=Follow me on GitHub! target=_blank>GitHub</a>       </li>       <li class=second>        <a href= title=Connect on LinkedIn target=_blank>LinkedIn</a>       </li>       <li class=third>        <a href= title=Email Me target=_blank>Google</a>       </li>       <li class=fourth>        <a href= title=My Resume target=_blank>Resume</a>       </li>      </ul>     </nav>      </div>  </div>  <script src=js/jquery.js type=text/javascript></script>   <script src=js/main.js type=text/javascript></script>  </body></html>
CSS3 Dropdown Menu (touch device or mouse compatible)
jquery;html;css;animation;touch