Esempio di menu con class active su A e div di contenimento floattato a sinistra con ampiezza 30% e UL portata al 100%. Il titolo h4, presente per ragioni di accessibilità, è stato spostato fuori dal viewport.

Inoltre, per evitare problemi di ampiezza, è conveniente spostare il bordo della UL (se presente) sul contenitore, in modo da non incorrere in aumenti dell’ampiezza complessiva, come prevede il box model, con ampiezza della UL che così supererebbe il 100%. Vedere il codice CSS per dettagli.

In questa soluzione, si è risolto il problema del gap in IE 7< spostando semplicemente il line-height e min-height su LI A. In questo modo non c'è bisogno né di padding né di float (che potrebbe non essere a volte desiderabile). Poiché IE 5.0 mantiene ancora un piccolo gap fra gli LI, la soluzione è stata quella di spostare anche i bordi su LI A, e di dichiarare display: inline per LI. Un atroce hack senza particolare senso, ma è la soluzione più robusta per supportare anche IE 5.0. Agli altri browser queste modifiche non fanno effetto. O meglio, non creano danni.