Multi-Column mit Navigation...

[Felix Riesterer]

Liebe CSS-Experten,

ich möchte meine Navi in zwei Spalten darstellen lassen, wobei die Liste der Links (ul) und ihre vorausgehende Unter-Überschrift (h2) nicht in einem eigenen Element gekapselt sind. Beispiel:

<nav>  
    <h2>Hauptmenü</h2>  
    <ul>  
        <li><a href="/">Home</a></li>  
        ...  
    </ul>  
    <h2>Untermenü</h2>  
    <ul>  
        <li><a href="/impressum">Impressum</a></li>  
        ...  
    </ul>  
</nav>

Mit den bisher verfügbaren Mitteln bin ich so weit gekommen, dass ich prinzipiell schon zwei Spalten erhalte:

nav {  
	-moz-column-count: 2;  
	-moz-column-gap: 10px;  
	-webkit-column-count: 2;  
	-webkit-column-gap: 10px;  
	column-count: 2;  
	column-gap: 10px;  
	width: 100%;  
}

Jetzt hätte ich aber gerne noch ein Extra dazu: Die beiden Überschriften sollen visuell nebeneinander stehen. Hier sieht das wie selbstverständlich aus, da jede Beispielliste nur ein Element hat:

Hauptmenü       Untermenü
* Home          * Impressum

In meinem Fall ist das Untermenü aber gerne sehr viel länger als das Hauptmenü. In FF und Android-Browser sehe ich in diesen Fällen, dass die Unterüberschrift des Untermenüs noch in der linken Spalte beginnt, was ich ja gerade nicht möchte. Außerdem möchte ich beim völligen Fehlen des Untermenüs gerne _keine_ Spalten mehr.

Wie geht das?

Was das Umbrechen der zweiten Unterüberschrift angeht, so habe ich das hier versucht, erhalte aber nicht das gewünschte Ergebnis:

nav h2 {  
	page-break-before: always;  
	page-break-after: avoid;  
	-webkit-column-break-before: always;  
	-webkit-column-break-after: none;  
	break-before: column;  
	break-after: avoid-column;  
}

Wer weiß Rat?

Liebe Grüße,

Felix Riesterer.