Mega Menu

Day 1: Creation of a mega menu with HTML/CSS

by Tiago Sousa

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<ul class="navegation-menu clearfix">
  <li class="nav-item">
    <a href="#"><i class="fa fa-television"></i></a>
    <div class="sub-navegation-wrap">
      <div class="sub-navegation">
        <div class="section group">
          <div class="col span_1_of_4">
            <img class="img-responsive" src="http://www.freedesign4.me/wp-content/gallery/posters/free-movie-film-poster-the_dark_knight_movie_poster.jpg">
          </div>

          <div class="col span_2_of_4">
            <h2>Melhores Filmes</h2>
            <ul class="lista-filmes melhores-filmes">
              <li><a href="#">Filme 1</a></li>
              <li><a href="#">Filme 1</a></li>
              <li><a href="#">Filme 1</a></li>
              <li><a href="#">Filme 1</a></li>
              <li><a href="#">Filme 1</a></li>
              <li><a href="#">Filme 1</a></li>
              <li><a href="#">Filme 1</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </li>
  <li class="nav-item">
    <a href="#"><i class="fa fa-video-camera"></i></a>
    <div class="sub-navegation-wrap">
      <div class="sub-navegation">
        <div class="section group">
          <div class="col span_1_of_4">
            <h2>ULTIMO LANCAMENTO</h2>
            <img class="img-responsive" src="http://www.freedesign4.me/wp-content/gallery/posters/free-movie-film-poster-the_dark_knight_movie_poster.jpg">
          </div>

          <div class="col span_2_of_4">
            <h2>Melhores Filmes</h2>
            <ul class="lista-filmes melhores-filmes">
              <li><a href="#">Filme 1</a></li>
              <li><a href="#">Filme 1</a></li>
              <li><a href="#">Filme 1</a></li>
              <li><a href="#">Filme 1</a></li>
              <li><a href="#">Filme 1</a></li>
              <li><a href="#">Filme 1</a></li>
              <li><a href="#">Filme 1</a></li>
         ...

CSS

/*  SECTIONS  */
			
			.section {
			  clear: both;
			  padding: 0px;
			  margin: 0px;
			}
			/*  COLUMN SETUP  */
			
			.col {
			  display: block;
			  float: left;
			  margin: 1% 0 1% 0%;
			}
			
			.col:first-child {
			  margin-left: 0;
			}
			/*  GROUPING  */
			
			.group:before,
			.group:after {
			  content: "";
			  display: table;
			}
			
			.group:after {
			  clear: both;
			}
			
			.group {
			  zoom: 1;
			  /* For IE 6/7 */
			}
			/*  GRID OF FOUR  */
			
			.span_4_of_4 {
			  width: 100%;
			}
			
			.span_3_of_4 {
			  width: 75%;
			}
			
			.span_2_of_4 {
			  width: 50%;
			}
			
			.span_1_of_4 {
			  width: 25%;
			}
			/*  GO FULL WIDTH BELOW 480 PIXELS */
			
			@media only screen and (max-width: 480px) {
			  .col {
			    margin: 1% 0 1% 0%;
			  }
			  .span_1_of_4,
			  .span_2_of_4,
			  .span_3_of_4,
			  .span_4_of_4 {
			    width: 100%;
			  }
			}
			
			.clearfix:after {
			  visibility: hidden;
			  display: block;
			  font-size: 0;
			  content: " ";
			  clear: both;
			  height: 0;
			}
			
			.clearfix {
			  display: inline-block;
			}
			
			* html .clearfix {
			  height: 1%;
			}
			
			.clearfix {
			  display: block;
			}
			
			:before,
			:after {
			  -webkit-box-sizing: border-box;
			  -moz-box-sizing: border-box;
			  box-sizing: border-box;
			}
			
			.navegation-menu {
			  padding-left: 0px;
			  list-style: none;
			  float: left;
			  margin: 0;
			  width: 100%;
			  position: relative;
			}
			
			.navegation-menu:before {
			  content: " ";
			  display: table;
			}
			
			.navegation-menu:after {
			  content: " ";
			  display: table;
			}
			
			.navegation-menu > .nav-item {
			  float: left;
			  border: 1px solid red;
			  height: 120px;
			  width: 10%;
			  box-sizing: border-box;
			  text-align: center;
			  padding: 38px 0px;
			  background: #cc0000;
			  color: #fff;
			  border: 1px solid #fff;
			}
			
			.navegation-menu > .nav-item > a {
			  font-size: 40px;
			  color:...