Responsive Multi Level Drop Down Nav Menu

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  
<style>
body {
  font-family: arial;
  font-size:18px;
  background: #efefef;
  margin: 0;
}
main {
  margin: 150px auto;
  max-width: 700px;
  padding: 2rem;
  background-color: #742c6c;
  border-radius: 3px;
  text-align: center;
  color:#fff;
}
h2 {
  margin: 0 0 30px;
}
@media (max-width: 800px) {
  body {
    font-size:16px;
  }
  main {
    max-width: 500px;
  }
}
</style>

</head>
<body>

<header>
  <h1><a href="#">Site Title</a></h1>
</header>
  
<div class="multinav">

<ul class="menu">
    <li><a href="#">Home</a></li>
    <li> 
      
      <label for="drop-1" class="toggle">Service +</label>
      <a href="#">Service</a>
      <input type="checkbox" id="drop-1"/>
      <ul>
        <li><a href="#">Service 1</a></li>
        <li><a href="#">Service 2</a></li>
        <li><a href="#">Service 3</a></li>
      </ul>
    </li>
    <li> 
      
      
      <label for="drop-2" class="toggle">Portfolio +</label>
      <a href="#">Portfolio</a>
      <input type="checkbox" id="drop-2"/>
      <ul>
        <li><a href="#">Portfolio 1</a></li>
        <li><a href="#">Portfolio 2</a></li>
        <li> 
          
          
          <label for="drop-3" class="toggle">Works +</label>
          <a href="#">Works</a>
          <input type="checkbox" id="drop-3"/>
          <ul>
            <li><a href="#">HTML/CSS</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">Python</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Submit</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="#">About</a></li>
  </ul>
</nav>

</div>

<main>
    <h2>Responsive Multi Level Nav Menu</h2>
    <p>A responsive Multi Level Nav Menu with CSS only. Menu Navigation that open out from the navigation bar of the screen and covers part of your main content when you click the Menu button.</p>
    </main>

</body>
</html>

/* CSS Source Code */
header {
  margin: 0;
  padding: 10px 0 0;
  display: block;
  width: 100%;
  background: #3cb3a8;
  height: 45px;
}

h1 {
  margin: 0 auto;
  text-align: center;
}

h1 a {
  color: #fff;
  margin: 0 0 0 30px;
  text-decoration: none;
  text-align: center;
}

.toggle,
[id^=drop] {
  display: none;
}

.multinav {
  background-color: #186e66;
  width: 100%;
}

nav {
  margin: 0 auto;
  padding: 0;
  max-width: 1200px;
  height: 45px;
}

nav:after {
  content: "";
  display: table;
  clear: both;
}

nav ul {
  float: left;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
  background-color: #186e66;
}

nav ul li {
  margin: 0px;
  display: inline-block;
  float: left;
}

nav a {
  display: block;
  padding: 0 20px;
  color: #FFF;
  font-size: 18px;
  line-height: 45px;
  text-decoration: none;
}

nav ul li ul li:hover {
  background: #000000;
}

nav a:hover {
  background-color: #000000;
}

nav ul ul {
  display: none;
  position: absolute;
  top: 45px;
}

nav ul li:hover>ul {
  display: inherit;
}

nav ul ul li {
  width: 170px;
  float: none;
  display: list-item;
  position: relative;
}

nav ul ul ul {
  position: absolute;
  margin: -45px 0 0 170px;
}

nav ul ul ul li {
  position: relative;
}

li>a:after {
  content: ' +';
}

li>a:only-child:after {
  content: '';
}

/* Media Queries
--------------------------------------------- */@media all and (max-width : 768px) {

nav {
    margin: 0;
  }

.toggle+a,
  .menu {
    display: none;
  }

nav ul li,
  nav ul {
    background-color: #254441;
  }

.toggle {
    display: block;
    background-color: #186e66;
    padding: 0 20px;
    color: #FFF;
    font-size: 36px;
    font-weight: bold;
    line-height: 45px;
    text-decoration: none;
    border: none;
    cursor: pointer;
  }

.menu li .toggle {
    font-size: 18px;
  }

nav ul {
    max-width: 360px;
  }

.toggle:hover {
    background-color: #676767;
  }

[id^=drop]:checked+ul {
    display: block;
    position: absolute;
    opacity: .9;
  }

[id^=drop-1]:checked+ul,
  [id^=drop-2]:checked+ul,
  [id^=drop-3]:checked+ul {
    display: block;
    position: inherit;
    opacity: .9;
  }

nav ul li {
    display: block;
    width: 100%;
  }

nav ul ul .toggle,
  nav ul ul a {
    padding: 0 40px;
  }

nav ul ul ul {
    position: initial !important;
    margin: 0;
  }

nav ul ul ul li a:hover {
    background-color: #676767;
  }

nav ul ul ul a {
    padding: 0 80px;
  }

nav a:hover,
  nav ul ul ul a {
    background-color: #000000;
  }

nav ul li ul li .toggle,
  nav ul ul a {
    background-color: #212121;
  }

nav ul ul {
    float: none;
    position: static;
    color: #ffffff;
  }

nav ul ul li:hover>ul,
  nav ul li:hover>ul {
    display: none;
  }

nav ul ul li {
    display: block;
    width: 100%;
  }

nav ul ul ul li {
    position: static;

}
}

@media all and (max-width : 330px) {

nav ul li {
    display: block;
    width: 94%;
  }

This is A Responsive Multi Level Drop Down Nav Menu plus with Pure CSS. Complete preview with syntax highlighting of html, css, js or javascript source code.