CodePen

HTML

            
              <label>Name: 
 <a href="#" id="clickme">Edit</a>
  
<ul style="display:none;">
  <li class="bar"></li>
  <li class="triangle" ></li>
  <li class="another-li">
  
  <input type="input" placeholder="enter first name" /></li>
  </ul>
</label>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              label {margin:8px 0 0; line-height:30px; display:block; color:#666;font-family:helvetica, arial; font-size:13px; font-weight:bold;}

ul {list-style:none;margin:0;padding:0;}

.bar {
    width:100%;
  	height:13px;
  	background:white;
    -moz-box-shadow: 0px 2px 8px 3px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0px 2px 8px 3px rgba(0, 0, 0, 0.15);
    -o-box-shadow: 0px 2px 8px 3px rgba(0, 0, 0, 0.15); 
    box-shadow: 0px 2px 8px 3px rgba(0, 0, 0, 0.15);
}
.bar:before {
   content:"";
   height:10px;
  width:100%;
   background:white;
  position:absolute;
  margin:-10px 0 0;
 
}
.triangle {
    width: 0;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-top: 9px solid white;
    margin:0 auto;
   
}
.triangle:before {
    content:"";
    width: 9px;
    height: 9px;
    -webkit-transform: rotate(-136deg);
    position:absolute;
    -moz-box-shadow: -3px -3px 6px 6px rgba(0,0,0,0.2);
    -webkit-box-shadow: -3px -3px 6px 6px rgba(0,0,0,0.2);
    -o-box-shadow: -3px -3px 6px 6px rgba(0,0,0,0.2);
    box-shadow: -4px -3px 6px 6px rgba(0,0,0,0.1);
    overflow:hidden;
    background:black;
    border-radius:0 0 50px 1px;
    margin:-16px -5px 0;
  z-index:-1;
}
.triangle:after {
  content:"";
  width:30px;
  height:10px;
  background:white;
  position:absolute;
  margin:-30px -15px 0;
}
input {margin:30px 0 0;width:200px;height:30px;font-family:helvetica, arial;color:#666;font-size:13px;margin:20px 0 0 20px;border:none;}
.another-li {background:#ccc;height:100px;z-index:-5;position:absolute;width:100%;margin:-10px 0 0;}
#clickme {margin:0 0 0 50px;}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
               $("#clickme").click(function () {
    $("ul").show("slow");
    });
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................