Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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="http://georgrichtsfeld.local/">Home</a></li>
<li><a href="http://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="http://georgrichtsfeld.local/?page_id=802">Afrika – Karte</a></li>
<li><a href="http://georgrichtsfeld.local/?page_id=863">Ägypten – Kenia</a></li>
<li> <a href="http://georgrichtsfeld.local/?page_id=865">Uganda – Südafrika/Namibia – Tansania</a></li>
<li><a href="http://georgrichtsfeld.local/?page_id=867">Ghanna – Marokko</a></li>
</ul>
<li><a href="#">Europa 2xxx – 2xxx</a></li>
<li><a href="http://georgrichtsfeld.local/?page_id=13">Bildergalerien</a></li>
<li><a href="http://georgrichtsfeld.local/?page_id=560">Links</a></li>
<li><a href="http://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.
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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="http://georgrichtsfeld.local/">Home</a></li>
Andrew Nevins
(@anevins)
WCLDN 2018 Contributor | Volunteer support
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.
