@@tomtomtom:

nuqneH

Die Frage lautet: wie kann ich die weiße Fläche rund um das C genauso klickbar machen?

nav a { display: block }

>   
> Qapla'  
  
Yupp, das funktioniert und ergibt genau das, was ich erreichen wollte. Besten Dank!  
Da bleibt mir noch viel zu lernen ...  
  
  
Mein Test-Menü sieht jetzt also so aus:  
  

<nav class="TEST">
  <ul>
    <li><a href="B">Banane</a></li>
    <li><a href="C">C</a></li>
    <li><a href="D">D</a></li>
    <li><a href="E">Erdbeertorte mit Schlagsahne</a></li>
  </ul>
</nav>

<style>
ul  { display:flex;  justify-content:space-between;  }
li  { flex-grow:1;  text-align:center; }
nav a  { display:block; }
</style>

  
Jetzt bleibt noch ein Punkt übrig, der nichts mit der Original-Frage zu tun hat: Wie mache ich das auch für Browser funktionsfähig, die von flex nichts verstehen? Ich habe versucht, das flex-Layout mit dem Table-Layout zu kombinieren, aber das hat nicht geklappt:  
  

nav  { display:table;  width:100%; }
ul  { display:table-row;  display:flex;  justify-content:space-between; }
li  { display:table-cell;  text-align:center;  flex-grow:1; }
nav a  { display:block; }

  
Bei einem alten Firefox-20 funktioniert das schön, der ignoriert einfach die ihm unbekannten flex-Einstellungen. Aber die neueren (habe Firefox-33 und Chrome-38 probiert) stören sich verständlicherweise an display:table-cell. Das zerbröselt mir das flex-Layout. Das Table-Layout wiederum kommt nicht ohne seine Tabellen-Zellen aus.  
  
Hier also eine neue Frage (Sollte ich dafür eigentlich einen neuen Beitrag anfangen?): Hat jemand eine Idee, wie ich für neuere Browser Flex-Layout verwenden kann, für ältere Browser aber Tabellen-Layout (oder auch etwas anderes, vielleicht geeigneteres)?  
  
Danke für jeden Tipp!  
  
Tom