CodePen

HTML

            
              <ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li> 
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
</ul>
            
          
!
via HTML Inspector

CSS

            
              ul {
  width: 550px;
  margin: 30px auto;
  list-style: none;
  overflow: hidden;
}

li {
  width: 100px;
  height: 100px;
  margin: 0 10px 10px 0;
  float: left;
  background: rgb(0,79,140); 
  text-align: center;
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-weight: bold;
  font-size: 30px;
  line-height: 100px;
  color: white;
}

li:hover {
  background: rgba(0,79,140,0.6);
}

li:nth-child(even) {
  margin: 110px 0 0 -110px;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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