0131 meny horisontell o vertikal

I föregående uppgift gjordes menyer med följande utseende.

bild på hemsidan som ska göras

Kan du ändra på koden så att menyn ser ut så här. Målet är att bra behöva lägga till en klass på till exempel en nav-tagg för att växla mellan horisontell och vertikal meny. Klasserna kan döpas till horizontal och vertikal.

Tips i CSS!

  display: inline-block;

Inline-element kan ej ha width, height, padding och margin, det kan däremot inline-block-element.

bild på hemsida med menyer

En tredje utmaning är att få bredden på respektive "länk" i menyn att få bredd efter innehåll, se bild nedan. Kan du göra stildokumentet så att du enkelt kan växla mellan tre klasser i HTML-koden så att utseendet ändras. Förslag på klassnamn:

  horizontal
  vertical
  horizontal-variable-width

bild på hemsida med menyer med bredd på länkar efter innehåll