<body class="site">
    <header>
          <div class="header-search">
              <h2 class="title">Search</h2>
          </div>
  
          <div class="header-nav">
              <div id="accordian">
                  <ul>
                    <li>
                      <h3>What we do</h3>
                      <ul>
                        <li><a href="#">Reports</a></li>
                        <li><a href="#">Search</a></li>
                        <li><a href="#">Graphs</a></li>
                        <li><a href="#">Settings</a></li>
                      </ul>
                    </li>
                    <li>
                      <h3>Solutions</h3>
                      <ul>
                        <li><a href="#">Technology One</a></li>
                        <li><a href="#">Technology Two</a></li>
                      </ul>
                    </li>
                    <li>
                      <h3>Industries</h3>
                      <ul>
                        <li><a href="#">Banking</a></li>
                        <li><a href="#">Education</a></li>
                        <li><a href="#">Healthcare</a></li>
                      </ul>
                    </li>
                    <li>
                      <h3>Company</h3>
                      <ul>
                        <li><a href="#">Menu One</a></li>
                        <li><a href="#">Menu Two</a></li>
                        <li><a href="#">Menu Three</a></li>
                        <li><a href="#">Menu Four</a></li>
                      </ul>
                    </li>
                    <li>
                      <h3>Partners</h3>
                      <ul>
                        <li><a href="#">Menu One</a></li>
                        <li><a href="#">Menu Two</a></li>
                        <li><a href="#">Menu Three</a></li>
                        <li><a href="#">Menu Four</a></li>
                      </ul>
                    </li>
                    <li>
                      <h3>Resources</h3>
                      <ul>
                        <li><a href="#">Menu One</a></li>
                        <li><a href="#">Menu Two</a></li>
                        <li><a href="#">Menu Three</a></li>
                        <li><a href="#">Menu Four</a></li>
                      </ul>
                    </li>
                    <li>
                      <h3>Support</h3>
                      <ul>
                        <li><a href="#">Menu One</a></li>
                        <li><a href="#">Menu Two</a></li>
                        <li><a href="#">Menu Three</a></li>
                        <li><a href="#">Menu Four</a></li>
                      </ul>
                    </li>
                  </ul>
            </div><!-- .accordian -->    
      </div><!-- .header-nav -->

    <footer>&#169;2018 Sidetrack Studio</footer>

  </header>

<main class="main-content">

    <div class="top"</div>
            <h1>Solutions</h1>
    </div><!-- .top --> 
  
    <div class="menu"</div>
            <ul>
              <li>Submenu 1</li>
              <li>Submenu 2</li>
              <li>Submenu 3</li>
              <div class="menu-indicator"></div>
            </ul>         
    </div><!-- .middle-top --> 

    <div class="middle-bottom"</div>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat ac tincidunt vitae semper quis lectus. Tincidunt id aliquet risus feugiat in. Donec pretium vulputate sapien nec sagittis aliquam. Ornare lectus sit amet est placerat in egestas. Vitae sapien pellentesque habitant morbi. Arcu vitae elementum curabitur vitae. Lacus vestibulum sed arcu non odio euismod lacinia at. A diam maecenas sed enim ut. Id porta nibh venenatis cras sed felis eget.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquet lectus proin nibh nisl condimentum id venenatis. Sit amet facilisis magna etiam tempor orci eu. Habitasse platea dictumst quisque sagittis purus sit amet. Sit amet commodo nulla facilisi nullam vehicula ipsum a. Congue quisque egestas diam in arcu cursus euismod. Id semper risus in hendrerit. Fringilla est ullamcorper eget nulla facilisi etiam dignissim. Nulla pellentesque dignissim enim sit. Sed euismod nisi porta lorem mollis. Sit amet mauris commodo quis imperdiet massa tincidunt. Etiam tempor orci eu lobortis elementum nibh tellus molestie nunc. Lectus arcu bibendum at varius vel pharetra vel turpis. Id volutpat lacus laoreet non. Vitae tempus quam pellentesque nec nam aliquam sem et tortor. Habitasse platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper. Donec ultrices tincidunt arcu non sodales. Viverra adipiscing at in tellus integer feugiat scelerisque. Sed nisi lacus sed viverra tellus.

Est velit egestas dui id ornare arcu. Malesuada bibendum arcu vitae elementum curabitur vitae nunc sed velit. Tempus imperdiet nulla malesuada pellentesque elit eget. Id aliquet lectus proin nibh nisl condimentum. Dignissim suspendisse in est ante in. Neque viverra justo nec ultrices. Diam sit amet nisl suscipit. Faucibus purus in massa tempor nec feugiat nisl pretium. Massa placerat duis ultricies lacus. Eget magna fermentum iaculis eu non diam phasellus vestibulum.

Quisque id diam vel quam elementum pulvinar etiam non quam. Pretium aenean pharetra magna ac placerat vestibulum lectus mauris. Urna nunc id cursus metus aliquam eleifend mi in. Vel quam elementum pulvinar etiam. Viverra vitae congue eu consequat ac felis. Pulvinar elementum integer enim neque volutpat ac tincidunt vitae. Et netus et malesuada fames ac. Erat nam at lectus urna duis convallis. In est ante in nibh mauris cursus mattis molestie. Morbi tristique senectus et netus. Accumsan sit amet nulla facilisi morbi tempus iaculis. Nulla at volutpat diam ut venenatis tellus in. Mauris vitae ultricies leo integer malesuada nunc vel risus. Mattis pellentesque id nibh tortor id aliquet. Vel turpis nunc eget lorem dolor sed viverra ipsum nunc. Fermentum iaculis eu non diam phasellus vestibulum lorem. Vitae elementum curabitur vitae nunc sed velit. Est ultricies integer quis auctor elit sed vulputate mi sit.

Quisque id diam vel quam elementum pulvinar etiam non quam. Pretium aenean pharetra magna ac placerat vestibulum lectus mauris. Urna nunc id cursus metus aliquam eleifend mi in. Vel quam elementum pulvinar etiam. Viverra vitae congue eu consequat ac felis. Pulvinar elementum integer enim neque volutpat ac tincidunt vitae. Et netus et malesuada fames ac. Erat nam at lectus urna duis convallis. In est ante in nibh mauris cursus mattis molestie. Morbi tristique senectus et netus. Accumsan sit amet nulla facilisi morbi tempus iaculis. Nulla at volutpat diam ut venenatis tellus in. Mauris vitae ultricies leo integer malesuada nunc vel risus. Mattis pellentesque id nibh tortor id aliquet. Vel turpis nunc eget lorem dolor sed viverra ipsum nunc. Fermentum iaculis eu non diam phasellus vestibulum lorem. Vitae elementum curabitur vitae nunc sed velit. Est ultricies integer quis auctor elit sed vulputate mi sit</p>
    </div><!-- .middle-bottom --> 



</main><!-- .main-content -->

</body><!-- .site -->
body {
	font-family: Montserrat, arial, verdana;
}

h1 {
  color: #A4D05F;
}

h4 {
  color: black;
}

p {
  color: light grey;
  line-height: 1.7em;
}

.site {
display: grid;
grid-template-columns: 16.5em 1fr;
grid-template-areas:
    "header main-content"
}

header >* {
  border: 1px solid light grey;
}

main >* {
  border: 1px solid light grey;
}

header {
  grid-area: header;
  height: 100vh;
}

main {
  grid-area: main-content;
  height: 100vh;
}

header {
  display: grid;
  grid-template-rows: auto;
  background-color: #39A9D6;
}

.header-search {
  padding-left: 3rem;
  padding-top: 3rem;
}

.header-nav {
  padding-left: 3rem;
}

footer {
  color: white;
  font-size: .5rem;
  text-align: center;
  padding: 1rem;
}

main {
  display: grid;
  grid-template-rows: 150px auto 2fr;
  grid-template-areas:
    "top"
    "menu"
    "middle-bottom"; 
}

.top {
  text-align: center;
  padding: 3.5rem; 
}

.menu ul li {
  display: inline;
  list-style: none;
  padding: 2rem;
  color: #002959;
  font-weight: bold;
}

.menu {
  text-align: center;
  padding: 1rem;
  background-color: #54c7f2;
}

.middle-bottom {
/*   display: grid;
  grid-template-column: 1fr 1fr; */
  padding: 4rem;
  overflow: auto;
}

/*Basic reset*/
* {margin: 0; padding: 0;}

/***ACCORDIAN STYLES***/

#accordian {
	margin: 5rem auto 0 auto;
	color: #031A2B;
}
/*heading styles*/
#accordian h3 {
	font-size: 1rem;
	line-height: 3rem;
	cursor: pointer;
  color: #002959;
}
/*heading hover effect*/
#accordian h3:hover {
  color: #2A7B9C;
}
/*list items*/
#accordian li {
	list-style-type: none;
}
/*links*/
#accordian ul ul li a {
	color: white;
	text-decoration: none;
	font-size: .8em;
	line-height: 1rem;
	display: block;
	padding: 0 15px;
  margin-top: 1rem;
	margin-bottom: 1rem; 
	/*transition for smooth hover animation*/
	transition: all 0.15s;
}
/*hover effect on links*/
#accordian ul ul li a:hover {
  border-left: 3px solid #97ea12;
}
/*Lets hide the non active LIs by default*/
#accordian ul ul {
	display: none;
}
#accordian li.active ul {
	display: block;
}
.menu ul {
  list-style: none;
  text-align: center;
}
.menu ul li {
font-size: 1rem;
}
.menu ul li a {
  color: #2a3542;
  text-decoration: none;
}
.menu ul li a:hover {
  color: white;
  text-decoration: none;
}
.menu ul li:nth-child(1):hover {
color: #fff;
}
.menu ul li:nth-child(2):hover {
color: #fff;
}
.menu ul li:nth-child(3):hover {
color: #fff;
}

/*jQuery time*/
$(document).ready(function(){
	$("#accordian h3").click(function(){
		//slide up all the link lists
		$("#accordian ul ul").slideUp();
		//slide down the link list below the h3 clicked - only if its closed
		if(!$(this).next().is(":visible"))
		{
			$(this).next().slideDown();
		}
	})
})
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js