Pure CSS3 Mega Menu

• Home
• Menu
• About
  • News
    • Company
    • Products
    • Specials
  • Mission
  • Our Team
    • Markus Fisher
      • About
      • Skills
      • Contacts
    • Leyla Sparks
      • About
      • Skills
      • Contacts
    • Gleb Ismailov
    • Viktoria Gibbers
  • Rewards
  • Certificates
• Portfolio
  • Logos
  • Websites
  • Branding
  • Illustrations
• Contacts
• Share
  • Twitter
  • Facebook
  • Pinterest
  • Email

Collapsable mobile version

Below you can find HTML code of this demo.

<ul class="pcss3mm pcss3mm-collapsable">
	<!-- home -->
	<li>
		<a href="#"><i class="icon-home"></i>Home</a>
	</li>
	<!--/ home -->
				
	<!-- opener (requiered) -->
	<li class="opener">
		<a href=""><i class="icon-reorder"></i>Menu</a>
	</li>
	<!--/ opener -->
	
	<!-- about -->
	<li class="dropdown">
		<a href="#" class="active"><i class="icon-star"></i>About</a><b></b>
		<div class="grid-container3">
			<ul>
				<li class="dropdown">
					<a href="#" class="active"><i class="icon-bullhorn"></i>News</a>
					<div class="grid-container3">
						<ul>
							<li><a href="#"><i class="icon-ok"></i>Company</a></li>
							<li><a href="#"><i class="icon-ok"></i>Products</a></li>
							<li><a href="#"><i class="icon-ok"></i>Specials</a></li>
						</ul>
					</div>
				</li>
				<li><a href="#"><i class="icon-globe"></i>Mission</a></li>
				<li class="dropdown">
					<a href="#"><i class="icon-group"></i><b></b>Our Team</a>
					<div class="grid-container3">
						<ul>
							<li class="dropdown">
								<a href="#">Markus Fisher</a>
								<div class="grid-container3">
									<ul>
										<li><a href="#">About</a></li>
										<li><a href="#">Skills</a></li>
										<li><a href="#">Contacts</a></li>
									</ul>
								</div>
							</li>
							<li class="dropdown">
								<a href="#">Leyla Sparks</a>
								<div class="grid-container3">
									<ul>
										<li><a href="#">About</a></li>
										<li><a href="#">Skills</a></li>
										<li><a href="#">Contacts</a></li>
									</ul>
								</div>
							</li>
							<li><a href="#">Gleb Ismailov</a></li>
							<li><a href="#">Viktoria Gibbers</a></li>
						</ul>
					</div>
				</li>
				<li><a href="#"><i class="icon-trophy"></i>Rewards</a></a></li>
				<li><a href="#"><i class="icon-certificate"></i>Certificates</a></a></li>
			</ul>
		</div>
	</li>
	<!--/ about -->
	
	<!-- portfolio -->
	<li class="dropdown">
		<a href="#"><i class="icon-briefcase"></i>Portfolio</a><b></b>
		<div class="grid-container3">
			<ul>
				<li><a href="#"><i class="icon-lemon"></i>Logos</a></li>
				<li><a href="#"><i class="icon-globe"></i>Websites</a></li>
				<li><a href="#"><i class="icon-th-large"></i>Branding</a></li>
				<li><a href="#"><i class="icon-picture"></i>Illustrations</a></li>
			</ul>
		</div>
	</li>
	<!--/ portfolio -->
	
	<!-- contacts -->
	<li>
		<a href="#"><i class="icon-phone"></i>Contacts</a><b></b>
	</li>
	<!--/ contacts -->
	
	<!-- share -->
	<li class="right dropdown">
		<a href="#"><i class="icon-bullhorn"></i>Share</a><b></b>
		<div class="grid-container3">
			<ul>
				<li><a href="#"><i class="icon-twitter"></i>Twitter</a></li>
				<li><a href="#"><i class="icon-facebook-sign"></i>Facebook</a></li>
				<li><a href="#"><i class="icon-pinterest"></i>Pinterest</a></li>
				<li><a href="#"><i class="icon-envelope-alt"></i>Email</a></a></li>
			</ul>
		</div>
	</li>
	<!--/ share -->
</ul>