CodePen

HTML

            
              <ul class="layer_1">
  <li>Home</li>
  <li>About</li>
  <li class="dropdown">
    Products
    <ul class="layer_2">
      <li>A product</li>
      <li>Another product</li>
      <li>A third product</li>
      <li>
        Wait, a product range?
        <ul class="layer_3">
          <li>Product</li>
          <li>Product something</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Contact Us</li>
</ul>
            
          
!
via HTML Inspector

CSS

            
              ul {
  background-color: tomato;
  color: #fff;
  font-family: sans-serif;
  list-style-type:none;
  margin: 0;
  padding: 0;
}

ul.layer_1 {
  margin: 20px auto;
  position: relative;
  width: 70%;
}

  ul.layer_1 li {
    display: inline-block;
    padding: 11px 10px 9px;
    width: 24%;
  
    box-sizing: border-box;
    -moz-box-sizing: border-box;
  }

  ul ul {
    border-right: 3px solid #444;
    border-top: 3px solid #444;
    margin-top: 9px;
    opacity: 1;
    position: absolute;
    visibility: visible;
  }

  ul.layer_2 ul {
    margin: -29px 96.5% 0 ;
  }

    ul.layer_2 li {
      display: block;
      width: 100%;
    }

  li.dropdown:hover>ul,
  ul.layer_2 li:hover ul {
    opacity: 1;
    visibility: visible;
  }
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

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