Menü-Manipulation via CSS

[Beginner]

Hallo zusammen,

ich stehe vor dem folgenden Problem. Es wird eine Navigation automatisch und zur Laufzeit als liste (<li></li>) generiert und via CSS wie folgt dargestellt :

<ul>
  <li>Home</li>
  <li>Erste Seite</li>
  <li>Zweite Seite</li>
  <li>Dritte Seite</li>
  <li>Vierte Seite</li>
  <li>Fünfte Seite</li>
  <li>Sechste Seite</li>
</ul>

Home > Erste Seite > Zweite Seite > Dritte Seite > Vierte Seite > Fünfte Seite > Sechste Seite

Nun muss die Navigation ab einer gewissen Länge ungefähr Mittig verkürzt und durch drei Punkten ersetzt werden.

Home > Erste Seite > ... > Fünfte Seite > Sechste Seite

Wenn man dann über die drei Punkten fährt, müssen die bereits verkürzten Navigationselemente als Menü aufklappen. Ist das via CSS möglich? Hat jemand eine Idee dazu?

Danke im Voraus