آموزش ساخت مگامنو mega menu با CSS3

 <ul class="menu">
<li id="btn">  <a href="#">DropDown</a>  </li> 
 </ul>

 #btn{
background-color : #123456;
padding: 15px 30px;
}
.menu li{
list-style-type: none;
}
a{
color: white;
text-decoration : none ; 
}

 #btn{
float: left;
}

 <ul class="menu">
  <li id="btn">
    <a href="#">DropDown</a>
    <ul class="inmenu">
     <li class="form">
      <a href="#">Form</a>
     </li>
     <li>
      <a href="#">Gallery</a>
     </li>
     <li>
       <a href="#">Services</a>
     </li>
     <li>
       <a href="#">Videos</a>
     </li>
     <li>
       <a href="#">News</a>
     </li>
   </li>
 </ul>
</ul>

 inmenu{.
position: absolute;
background-color: whitesmoke;
top : 100%;
padding: 0;
left: 0;
width: 100%;
}
inmenu li{.
padding: 12px 23px;
padding-left: 0px; 
}
inmenu li a{.
color: black;
padding-left: 14px;
}
#btn{
position: relative;
}

 .inmenu{
visibility : hidden ;
opacity: 0;
transition: 0.3s;
padding-left:0;
}

 .menu:hover .inmenu{
visibility : visible ; 
opacity: 1;
transition: 0.3s;
}

 #btn:hover{
background-color: #123456;
transition: 0.3s;
}
.inmenu li:hover a{
color: green;
transition: 0.3s;
}
.inmenu li:hover {
border-left: 3px solid green;
}

 <li class="form"><a href="#">Form</a>
<ul class="inform">
<table>
<form>
<tr>
<td><input type="text" id="name" placeholder="Your Name">
</td>
<td></td>
<td><input type="text" id="lastname" placeholder="Your LastName">
</td> </tr>
<tr><td colspan="3"><textarea id="areaone" placeholder="Your Comment"></textarea></td></tr>
<tr>
<td><div id="left"><lable class="ll">Check1</lable><input type="checkbox" id="check">
<lable class="ll">Check2</lable><input type="checkbox" id="check">
<lable class="ll">Check3</lable><input type="checkbox" id="check"></div>
</td>
<td></td>

<td><div id="right"><lable class="rl">Radio1</lable><input type="radio" id="radio" name="a">
<lable class="rl"> Radio2</lable><input type="radio" id="radio" name="a">
<lable class="rl"> Radio3</lable><input type="radio" id="radio" name="a"></div>
</td>
</tr><tr><td>

<input type="reset" id="re"></td><td>
</td><td>
<input type="submit" Value="Submit" id="sub"></td>
</tr>
<tr><td colspan="3"><textarea placeholder="Write Some For Us..." id="areatwo"></textarea></td></tr></form>
</table>
</ul>
</li>

 .form{
position: relative;
}
.inform{
height: 800%;
position: absolute;
background-image: url("Lighthouse.jpg");
background-size: 100%;
top:0;
width: 400%;
padding: 0;
left: 100%;
}
input[type=text]{
padding: 10px 15px;
}
#sub , #name , .ll , #check{
float: left;
}
#re , #lastname , .rl , #radio{
float: right;
}
#areaone , #areatwo{
margin: auto;
display: block;
font-family: fantasy;
font-size: 14px;
}
table{
width :90%;
margin: auto;
}
#areaone{
width : 50%;
height: 100px;
text-align: center;

}
#areatwo{
width: 100%;
height: 78px;
background-color: transparent;
outline: 0;
border: none;
color: white;
}
lable{
color: white;
}
#sub,#re{
background-color: green;
border-radius: 50%;
padding: 10px;
color: white;
}

 #name{
transform : translate(-187px ,-50px);
transition: 0.9s;
border-radius: 0 15px 0 15px;
}
#lastname{
transform : translate(187px ,-50px);
transition: 0.9s;
border-radius: 15px 0 15px 0;

}
#areaone{
transform : translate(0px,-180px);
transition: 0.9s;

}
#left{
transform : translate(-228px ,0px);
transition: 0.9s;
}
#right{
transform : translate(228px ,0px);
transition: 0.9s;
}
#sub{
transform : translate(-340px ,140px);
transition: 0.9s;
}
#re{
transform : translate(340px ,140px);
transition: 0.9s;
}

 .inform{
overflow : hidden;
}

 function animations(){
document.getElementById("name").className ="new";
document.getElementById("lastname").className ="new";
document.getElementById("areaone").className ="new";
document.getElementById("areatwo").className ="new";
document.getElementById("check").className ="new";
document.getElementById("radio").className ="new";
document.getElementById("sub").className ="new";
document.getElementById("re").className ="new";
document.getElementById("left").className ="new";
document.getElementById("right").className ="new";
}

 .new{
transform : translate(0px,0px) !important;
transition: 0.9s;
}

 <ul class="inform" onclick="animations()">

 #name:focus{
border-radius: 15px 0 15px 0;
transition: 0.9s;
}
#lastname:focus{
border-radius: 0 15px 0 15px;
transition: 0.9s;
}
#re:hover , #sub:hover{
background-color: orange;
transition: 0.3s;
}

 
.inform{
visibility: hidden;
opacity: 0;
transition: 0.3s;
left: 300%;
}
.form:hover .inform{
visibility: visible;
opacity: 1;
transition: 0.3s;
left: 100%;
}