@import '/css/style.css';  
@import '/css/reset.css';

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>  
<script>  
  if( !window.jQuery ) document.write('<script src="/js/jquery-3.0.0.min.js"><\/script>');  
</script>  
<script src="/js/modernizr-custom.js"></script>  
<script src="/js/main.js"></script> <!-- Resource jQuery -->

<header class="cd-morph-dropdown">  
  <a href="#0" class="nav-trigger">Open Nav<span aria-hidden="true"></span></a>  
   
  <nav class="main-nav">  
  <ul>  
  <li class="has-dropdown gallery" data-content="about">  
  <a href="#0">About</a>  
  </li>  

  <li class="has-dropdown links" data-content="pricing">  
  <a href="#0">Pricing</a>  
  </li>  

  <li class="has-dropdown button" data-content="contact">  
  <a href="#0">Contact</a>  
  </li>  
  </ul>  
  </nav>  
   
  <div class="morph-dropdown-wrapper">  
  <div class="dropdown-list">  
  <ul>  
  <li id="about" class="dropdown gallery">  
  <a href="#0" class="label">About</a>  
   
  <div class="content">  
  <ul>  
  <li>  
  <a href="#0">  
  <em>Title here</em>  
  <span>A brief description here</span>  
  </a>  
  </li>  

  <li>  
  <a href="#0">  
  <em>Title here</em>  
  <span>A brief description here</span>  
  </a>  
  </li>  

  <li>  
  <a href="#0">  
  <em>Title here</em>  
  <span>A brief description here</span>  
  </a>  
  </li>  

  <li>  
  <a href="#0">  
  <em>Title here</em>  
  <span>A brief description here</span>  
  </a>  
  </li>  
  </ul>  
  </div>  
  </li>  

  <li id="pricing" class="dropdown links">  
  <a href="#0" class="label">Pricing</a>  

  <div class="content">  
  <ul>  
  <li>  
  <h2>Services</h2>  

  <ul class="links-list">  
  <li><a href="#0">Logo Design</a></li>  
  <li><a href="#0">Branding</a></li>  
  <li><a href="#0">Web Design</a></li>  
  <li><a href="#0">iOS</a></li>  
  <li><a href="#0">Android</a></li>  
  <li><a href="#0">HTML/CSS/JS</a></li>  
  <li><a href="#0">Packaging</a></li>  
  <li><a href="#0">Mobile</a></li>  
  <li><a href="#0">UI/UX</a></li>  
  <li><a href="#0">Prototyping</a></li>  
  </ul>  
  </li>  

  <li>  
  <h2>Projects</h2>  

  <ul class="links-list">  
  <li><a href="#0">Logo Design</a></li>  
  <li><a href="#0">Branding</a></li>  
  <li><a href="#0">Web Design</a></li>  
  <li><a href="#0">iOS</a></li>  
  <li><a href="#0">Android</a></li>  
  <li><a href="#0">HTML/CSS/JS</a></li>  
  </ul>  
  </li>  
  </ul>  
  </div>  
  </li>  

  <li id="contact" class="dropdown button">  
  <a href="#0" class="label">Contact</a>  
   
  <div class="content">  
  <ul class="links-list">  
  <li><a href="#0">Link #1</a></li>  
  <li><a href="#0">Link #2</a></li>  
  <li><a href="#0">Link #3</a></li>  
  <li><a href="#0">Link #4</a></li>  
  <li><a href="#0">Link #5</a></li>  
  <li><a href="#0">Link #6</a></li>  
  </ul>  

  <a href="#0" class="btn">Get in Touch</a>  
  </div>  
  </li>  
  </ul>  

  <div class="bg-layer" aria-hidden="true"></div>  
  </div> <!-- dropdown-list -->  
  </div> <!-- morph-dropdown-wrapper -->  
  </header>