CodePen

HTML

            
              <ul>
  <li>services
    <ul class="mega">
      <li>web</li>
      <li>mobile</li>
      <li>design</li>
    </ul>
  </li>
</ul>
            
          
!
via HTML Inspector

CSS

            
              ul{
  margin:0;
  padding:0;
  list-style:none;
  margin:0 auto;
  width:1000px;
  height:50px;
  background:pink;
}

li{
  display:block;
  width:100px;
  position:relative;
  cursor:pointer;
  transition:all .5s ease-out
  
}

.mega{
  display:none;
  width:1000px;
  height:300px;
  background:yellow;
  position:absolute;
  cursor:default;
  top:100%;
  transition:all .5s ease-out
}

li:hover .mega{
  display:block
}




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

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................