Three levels horizontal pure CSS menu

As you want a pure CSS solution, I assume you already have the 3 menus in HTML on your pages? You just need to style them?

Here is the code I get:

<nav class="nav" role="navigation">

<ul>
<li><a href="https://georgrichtsfeld.local/">Home</a></li>
<li><a href="https://georgrichtsfeld.local/?page_id=247">über Mich</a></li>
<li><a href="#">Reisen</a>
      <ul class="sub-menu" style="display: block;">
        </li>
<li><a href="#">Afrika 2009 – 2010</a>
          <ul class="sub-menu" style="display: block;">
            </li>
<li><a href="https://georgrichtsfeld.local/?page_id=802">Afrika – Karte</a></li>
<li><a href="https://georgrichtsfeld.local/?page_id=863">?gypten – Kenia</a></li>
<li> <a href="https://georgrichtsfeld.local/?page_id=865">Uganda – Südafrika/Namibia – Tansania</a></li>
<li><a href="https://georgrichtsfeld.local/?page_id=867">Ghanna – Marokko</a></li>
</ul>
<li><a href="#">Europa 2xxx – 2xxx</a></li>
<li><a href="https://georgrichtsfeld.local/?page_id=13">Bildergalerien</a></li>
<li><a href="https://georgrichtsfeld.local/?page_id=560">Links</a></li>
<li><a href="https://georgrichtsfeld.local/?page_id=562">Kontakt</a></li>
</nav>

I just need to position it according to the example. The colors/backgrounds/fonts aren’t important.

The <li> elements should have classes like “current-menu-item”, how are you generating this menu?

They do have but I’ve stripped them in this example.

Here’s what it looks like:

<li id="menu-item-573" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-555 current_page_item menu-item-573"><a href="https://georgrichtsfeld.local/">Home</a></li>

Briefly looking at it you can probably do this by hiding all submenus by default, then displaying the one that’s within the <li> of the class “current-menu-item”, e.g.

ul ul {
 display: none;
}

ul .current-menu-item ul {
 display: block;
}

Isn’t there something like free plugin for that? This looks too complicated for me.