Multilevel dropdown menu

by Emanuele del Grande

HTML

<div class="logo">
    <span>CSS</span> <span>MenuBar</span>
    <div>Pure-CSS dropdown menu</div>
</div>

<ul class="menu">
  <li><a href="#">Home</a></li>
  <li><a href="#">Timetable</a>
    <ul>
      <li><a href="#">Projects</a>
        <ul>
          <li><a href="#">Create new</a></li>
          <li><a href="#">Projects list
              <div class="caption">
                Projects listed from the dev bucket
              </div>
            </a>
          </li>
          <li><a href="#">Statistics</a></li>
        </ul>
      </li>
      <li><a href="#">History</a>
        <ul>
          <li><a href="#">Timetable</a></li>
          <li><a href="#">Allocation</a></li>
        </ul>
      </li>
      <li><a href="#">Account</a>
        <ul>
          <li><a href="#">Personal information</a></li>
          <li><a href="#">Company information</a></li>
          <li><a href="#">Active features</a></li>
          <li><a href="#">Preferences</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">System</a>
    <ul>
      <li><a href="#">Installation</a></li>
      <li><a href="#">Upgrades</a>
        <ul>
          <li><a href="#">Upgrades history</a></li>
          <li><a href="#">Open ticket</a></li>
          <li><a href="#">Online documentation</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Solutions</a>
    <ul>
      <li><a href="#">Last release</a></li>
      <li><a href="#">Active versions</a></li>
      <li><a href="#">Archive</a></li>
      <li><a href="#">Versioning journal</a></li>
    </ul>
  </li>
</ul>


<div id="content">
A beautiful menu bar: just hover the menu.<br />
To be checked: the transition on opacity of list items with display: block/none does not work.
</div>

CSS

@import url(https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap);

:root {
  --font-color: #444;
  --font-family: Inter, Roboto, Arial, Helvetica;
  --font-size: 14px;
  --font-weight: 300;
  --letter-spacing: -0.5px;
  --main-color: #607f8b; /* #4ae */
  --inner-border-width: 1px;
  --border-color: #ddd;
  --v-padding: 10px;
}


/* GENERIC STYLE */
*, *:before, *:after { margin; 0; padding: 0; box-sizing: border-box; outline: none; }
html, body {
    font: 14px var(--font-family); color: var(--font-color); line-height: 1.4em;
    font-weight: var(--font-weight); letter-spacing: var(--letter-spacing);
}
.logo { font: 42px var(--font-family); margin: 0; padding: 10px 0 0 20px; font-weight: 800; letter-spacing: -3px; white-space: nowrap; }
.logo span:first-child {
    position: relative; top: 0; left: 0; padding: 0 13px 0 10px; color: var(--main-color); background: var(--main-color); color: #fff;
    clip-path: ellipse(100% 125% at 100% 50%); z-index: 1;
}
.logo span:nth-child(2) { position: relative;top: 0; left: 0; margin: 0 0 0 -13px; background: transparent; z-index: 2; }

.logo div { font: 12px var(--font-family); padding: 0 0 0 70px; letter-spacing: -0.5px; }

/* DROPDOWN MENU */
ul.menu { font-size: var(--font-size); list-style-type: none; background: #eee; }
ul.menu:after { content: ""; display: block; min-height: 0; max-height: 0; width: 0; clear: both; }
ul.menu li {
  display: block; position: relative; top: 0; left: 0; float: left;
  padding: 0; background: #eee; color: var(--font-color); white-space: nowrap; transition: all .2s;
}
ul.menu > li { border-right: var(--inner-border-width) solid var(--border-color); font-weight: bold; }
ul.menu > li:last-child { border-right: 0; }
ul.menu li:hover { background: var(--main-color); }


ul.menu li a { display: block; padding: var(--v-padding) 15px; text-decoration: none; color: inherit; }
ul.menu li:hover > a { color: #fff; }

ul.menu li ul { display: none;...