Skulle göra en ny bloggdesign, men råkade radera den jag har så nu kommer det se kaos ut tills jag har fixat en ny. SÅ KLANTIGT! Men håll ut mina vänner.. en ny är på ingång!

Nej men kolla, jag trollade tillbaka den ;]

Steg 1 - Klistra in denna kod längst ner i STILMALLEN

#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; } /* Ändra till right om du vill ha menyn till höger istället*/
#navbar li a {
display: block;
padding: 2px 3px;
background-color: none; /*Ändra färgen på menyflikarna här*/
color: #000; /*Ändra färgen på texten här*/
text-weight: normal;
font-family: tahoma; /*Ändra typsnittet här*/
font-size: 10px; } /*Ändra storleken på texten här*/
#navbar li ul {
display: none;
width: 12em; /* Ändra bredden på undermenyn här */
background-color: #fff;
/* opacitet for IE */
filter:alpha(opacity=75);
/* opacity: 0.75; filter: alpha(opacity=75); */
/* opacitet CSS3 standard */
opacity:0.75;
/* opacitet for Mozilla */
-moz-opacity:0.75;
}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
z-index: 1; }
#navbar li:hover li, #navbar li.hover li {
float: none; }
#navbar li:hover li a, #navbar li.hover li a {
background-color: #fdf5f6;
/* opacitet for IE */
filter:alpha(opacity=75);
/* opacity: 0.75; filter: alpha(opacity=75); */
/* opacitet CSS3 standard */
opacity:0.75;
/* opacitet for Mozilla */
-moz-opacity:0.75;
/*Ändra färgen på undermenyn*/
border-bottom: 0px solid #d14d89;
color: #000; } /*ändra textfärgen på undermenyn här*/
#navbar li li a:hover {
border-bottom: 1px solid #e6aaaa;
background-color: #facfcf; } /*Ändra färg*/

Här ser du även vad du kan ändra på när det kommer till färger och dylikt. När ni ändrar så var försiktigt med vad ni ändrar så ni inte tar bort en kod som behövs för att allt ska bli rätt!


Steg 2 - Gå in i kodmallen → leta fram <div id="header"> → under denna skall du klistra in denna kod: (det i RÖTT skall ej klistras in, det är koden mellan som ni skall använda er av. Kolla hur det ser ut här och spara kodmallen när den ser ut som den gör, OBS! Glöm inte att det skall vara en DIV i slutet)

<div id="header">
<ul id="navbar">
<li><a href="#">FLIK 1</a>
<ul>
<li><a href="ADRESSEN"> RUBRIK</a></li>
<li><a href="ADRESSEN"> RUBRIK</a></li>
<li><a href="ADRESSEN"> RUBRIK</a></li>
</ul>
</li>
<li><a href="#">FLIK 2</a>
<ul>
<li><a href="ADRESSEN"> RUBRIK</a></li>
<li><a href="ADRESSEN"> RUBRIK</a></li>
</ul>
</li>
</div>

Beroende på hur många "underrubriker" du vill använda dig får du själv klistra in / ta bort så det passar din design. FLIK 1 är då namnet du vill skall synas i headern medans RUBRIK är namnet på kategorin som dyker upp när du håller muspekaren på.


Att tänka på..
För att flytta placeringen på vart denna meny hamnar gör du i stilmallen → #header { med hjälp av padding koderna. Detta blir krångligare att förklara då alla har olika vilket gör det omöjligt för mig att säga vilka siffror ni skall använda.

Innan DU börjar fixa med detta så spara den nuvarande designen du har ifall något skulle gå fel.


LYCKA TILL...