<style type="text/css"> 
<!-- 
/* 
   Created 2006 by Rickard Claeson - rickard.claeson@gmail.com 
   Please, do not remove this. 
*/ 
 
/* 
NÅGRA KORTA ORD 
Man kan skapa hur många nivåer som helst i menyn, läs punkt 3. 
Menyn klarar validering (css, HTML-transitional samt strict). 
Menyn stör inte sökmotorerna (likt många javascripts-menyer gör). 
Menyn är hittills testad i Opera, Firefox och Explorer där den beter sig och ser ut likvärdigt. 
 
Menyn har 2 stycken divar som omsluter hela menyn. Den yttersta, #menu_container, är till för att ge en bakgrunds- 
färg som sträcker sig 100%. Denna kan alltså tas bort om man vill. 
 
Om man inte vill använda sig av en centrerad meny så kan man ta bort allt i #menu, förutom position:absolute; (och 
margin-top:-1px; vid användandet av #menu_container). 
 
För frågor och kommentarer, kontakta mig på rickard.claeson@gmail.com. 
 
 
UTFÖRA ÄNDRINGAR 
1. ÄNDRA DIMENSIONER: 
   BREDD 
   1. Öka/minska samtliga width med x-antal pixlar. 
   2. Öka/minska (#menu ul ul ul)'s left med samma x-antal pixlar. 
   3. Öka/minska (#menu .group ul)'s left med samma x-antal pixlar. 
   4. Vid användandet av centrerad meny: 
          a. Beräkna: ((.head width) * antalet rubriker) / -2 (tex: 110px * 5 = 550px --> 550/-2 = -225px) 
          b. Ta värdet från 4a och sätt in så här: #menu { margin:-1px auto auto -XXXpx; } (tex:  margin:-1px auto auto -275px;) 
   HÖJD 
   1. Ändra line-heighten med x-antal pixlar på (#menu .angle_quot) och (#menu a ...--> font:12px/25px, där 25 är line-heighten) 
   2. Ändra margin-top på (#menu ul ul ul) med samma antal pixlar som ovan (dock subtraherat). 
   3. Ändra top på (#menu .group ul) med samma antal pixlar. 
   4. Om #menu_container används, ändra även dennes height med samma antal pixlar. 
   5. Vill du ändra rubriken för sig, lägg då till i (#menu .head): line-height:XXpx;. Ändra även #menu_container's height till samma värde. 
 
2. ÄNDRA UTSEENDE (Tar färg som exempel, men även typsnitt, textdekorationer osv går att ändra) 
   2.1. För att byta border-färg (byt helt enkelt ut alla färger: #aaa): 
          a. Ändra (#menu .head)'s top och bottom -border (till för rubrikerna. .head ändrar samtliga attribut för rubrikerna). 
          b. Om #menu_container används, ändra background-color till samma som a. 
          c. Ändra border på #menu ul ul a. 
          d. För att skapa särskilt utseende på nivå 2, lägg till: #menu ul ul ul a { border:1px solid #XXXXXX; } 
        
   2.2. För att byta bakgrundsfärger-och andra attribut (byt helt enkelt ut alla tex färgerna: #fafafa): 
         a. Ändra (#menu a)'s background-color (till för rubrikerna). 
          b. Om #menu_container används, ändra background-color till samma som a. 
         c. Ändra (#menu li:hover ul a, #menu a:hover ul ul a)'s background-color (till för länkarna) 
         d. För att skapa särskilt utseende för nivå 2, lägg till sist: #menu li:hover ul ul a, #menu a:hover ul ul ul a { 'ATTRIBUTEN' } 
        
   2.3. För att byta hover-färg och andra attribut (byt ut alla #ddd): 
          a. Ändra (#menu li:hover a, #menu a:hover a)'s background-color (till för rubrikerna). 
          b. Ändra (#menu li:hover ul a:hover, #menu a:hover ul ul a:hover)'s background-color (till för underlänkarna). 
          c. För att skapa särksilda hover-effekter för nivå 2, lägg till i slutet:#menu li:hover ul ul a:hover, #menu a:hover ul ul ul a:hover { 'ATTRIBUTEN' } 
 
3. SKAPA DJUPARE NIVÅER (fler undernivåer) 
    1. Kopiera in en existerande nivå-2 grupp och kopiera in den. 
    2. Lägg till i slutet: #menu li:hover ul ul ul, #menu a:hover ul ul a:hover ul ul { display:none; } 
    3. Lägg till i slutet: #menu ul ul ul li:hover ul, #menu a:hover ul li ul li ul a:hover ul { display:block; } 
    4. För att skapa ytterligare (nivå-4:a grupper). Gör samma sak, men öka med en ul per nivå. 
 
4. För att få menyerna att vecklas ut åt vänster istället 
    1. Väckla alla till vänster 
          a. Växla till negativt värde på (#menu ul ul ul) samt (#menu .group ul). (tex left:-109px) 
    2. Väckla endast vissa till vänster 
          a. Använd: #menu .t_left och sätt den inne i den ul-nivå som skall gå åt vänster istället. 
    
 
/* GENERELL STRUKTUR */ 

#menu_container { width:100%; height:16px; color:white; border-top:1px solid #aaa; border-bottom:1px solid #aaa; position:absolute;  } 
#menu { position:absolute;margin-top:-1px } 
#menu ul { list-style:none; margin:0; padding:0;  position:relative; } 
#menu ul li { position:relative; } 
#menu ul ul { display:none; } 
#menu ul ul li { margin-top:-1px; } 
#menu ul ul ul { margin-top:-17px; position:absolute; left:109px; } 
#menu .head { font:12px/16px Verdana, Arial, Helvetica, sans-serif;padding:8px;height:13px; font-weight:bold; text-align:center;background-image:url('bilder/knappbg1.jpg');
background-repeat:repeat-x;border-left:1px dotted white;
 } 

#menu .head a:visited{ color:white } 
#menu .angle_quot { font-weight:bold; line-height:13px; cursor:pointer; position:absolute; right:2px; } 
/* IE STRUKTUR */ 
#menu table {  border-collapse:collapse; } 

/* LÄNKAR (efter första kommatecknet är för ie) */ 
#menu a { font:10px Verdana, Arial, Helvetica, sans-serif;color:white; text-decoration:none;display:block; } 
#menu ul ul a { width:100%; text-indent:5px; border:1px solid white;background-color:#EDF0F5;
line-height:16px;
border-bottom:1px solid white;
font-weight:bold; } 
#menu li:hover a, #menu a:hover a { color:white;  } 
#menu li:hover ul, #menu a:hover, #menu a:hover ul { display:block; color:white;  } 
#menu li:hover ul a, #menu a:hover ul ul a { color:#4C6192;   position:relative; } 
#menu li:hover ul ul, #menu a:hover ul ul ul { display:none; } 
#menu li:hover ul a:hover, #menu a:hover ul ul a:hover { color:#4C6192;   } 
#menu ul ul li:hover ul, #menu a:hover ul li ul a:hover ul { display:block; } 
/* FÖR ATT VECKLA UT EN NIVÅ ÅT VÄNSTER ISTÄLLET 
#menu ul ul .t_left { left:-109px; } 
*/ 
--> 
</style>
