<div class="container">
  <nav class="border split-nav shadow shadow-large shadow-hover">
    <div class="nav-brand">
      <h3><a href="#">Bejamas</a></h3>
    </div>
    <div class="collapsible">
      <input id="collapsible1" type="checkbox" name="collapsible1">
      <label for="collapsible1">
        <div class="bar1"></div>
        <div class="bar2"></div>
        <div class="bar3"></div>
      </label>
      <div class="collapsible-body">
        <ul class="inline">
          <li><a href="https://bejamas.io/blog/">Blog</a></li>
          <li>
            <a href="https://bejamas.io/services/">Services</a>
            <ul class="paper">
              <li><a href="https://bejamas.io/services/ecommerce/">eCommerce</a></li>
              <li><a href="https://bejamas.io/services/web-app/">Custom Web App</a></li>
              <li><a href="https://bejamas.io/services/design/">Digital Design</a></li>
            </ul>  
          </li>
          <li>
            <a href="https://bejamas.io/discovery/">Modern dev</a>
            <ul class="paper">
              <li><a href="https://bejamas.io/discovery/headless-cms/">Headless СMS</a></li>
              <li><a href="https://bejamas.io/discovery/static-site-generators/">Static Site Generators</a></li>
              <li><a href="https://bejamas.io/discovery/hosting/">Deployment Platforms</a></li>
              <li><a href="https://bejamas.io/discovery/serverless-database/">Serverless Databases</a></li>              
            </ul>              
          </li>
        </ul>
      </div>
    </div>
  </nav>
</div>

@import url("https://unpkg.com/papercss@1.9.2/dist/paper.css") layer(csspaper);

nav li:has(ul) > a::after {
  content: "+";
  margin-inline: 10px;
}


/* Demo style */
body {
  padding-top: 3rem;
  min-height: 100vh;
  background-color: #f6eee3;
  background-size: 20px 20px;
  background-image:  repeating-linear-gradient(0deg, #e5decf, #e5decf 1px, #f6eee3 1px, #f6eee3);
}

nav ul.inline li {
  margin-inline: 1rem;
}

li:has(ul) {
  position: relative;
}

li:hover ul {
  opacity: 1;
  pointer-events: auto;
}

li ul {
  position: absolute;
  top: 120%;
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin: 0;
  padding: 1rem;
  opacity: 0;
  pointer-events: none;
}

li li {
  width: max-content;
}