VIl du ha en snygg genomskinlig dropdown meny på din blogg?

1. Kopiera och klista in följande längst ned i din stilmall och spara den:

#navbar {overflow: vissble;text-transform: uppercase; margin: 0; padding-top: 200px; margin-top: 40px;
padding: 0;background-color: #F2F2F2;/* opacitet for IE */
filter:alpha(opacity=80);
/* opacity: 0.80; filter: alpha(opacity=60); */
/* opacitet CSS3 standard */
opacity:0.80;
/* opacitet for Mozilla */
-moz-opacity:0.80;color: #000; 
height: 25px;
-moz-box-shadow:0px 0px 2px #ccc;
box-shadow: 0px 0px 2px #ccc;
}

#navbar li { overflow: vissble; list-style: none; float: left; } /* Ändra till right om du vill ha menyn till höger istället*/

#navbar li a { overflow: vissble; display: block; padding-left:10px; padding-right:10px; padding-top:5px; padding-bottom:0px; border-left: 0px solid #ffffff; border-bottom: 0px solid #ffffff; ;background-color: #F2F2F2;/*Ändra färgen på menyflikarna här*/ color: #000000; /*Ändra färgen på texten här*/ text-decoration: none; font-family: verdana; /*Ändra typsnittet här*/ font-size: 10px; } /*Ändra storleken på texten här*/ #navbar li ul { overflow: vissble;display: none; width: 11em; /* Ändra bredden på undermenyn här */ ;background-color: #F2F2F2;/* opacitet for IE */
filter:alpha(opacity=99);
/* opacity: 0.99; filter: alpha(opacity=99); */
/* opacitet CSS3 standard */
opacity:0.99;
/* opacitet for Mozilla */
-moz-opacity:0.80;} #navbar li:hover ul, #navbar li.hover ul { overflow: vissble; display: block; position: absolute; margin: 0; padding: 0; z-index: 1; } #navbar li:hover li, #navbar li.hover li { overflow: vissble; float: none; }

#navbar li:hover li a, #navbar li.hover li a { overflow: vissble; background-color: #ffffff; /*Ändra färgen på undermenyn*//* opacitet for IE */ filter:alpha(opacity=80); /* opacity: 0.80; filter: alpha(opacity=80); */ /* opacitet CSS3 standard */ opacity:0.80; /* opacitet for Mozilla */ -moz-opacity:0.80; border-bottom: 0px solid #fff; border-left: 1px solid #cccccc; border-right: 1px solid #cccccc; color: #696969; } /*ändra textfärgen på undermenyn här*/

#navbar li li a:hover {overflow: vissble; color: #ffffff; background-color: #ccc; } /*Ändra färgen när man håller musen över undermenyn*/


2. Klista in följande i din kodmall och spara:

<ul id="navbar">
<li><a href="http://sarasoderberg.blogg.se">Startsida</a>

</li>
<li><a href="#">Kategorier</a>
<ul>
<li><a href="http://sarasoderberg.blogg.se/category/traning.html">Träning</a></li>
<li><a href="http://sarasoderberg.blogg.se/category/tavling.html">Tävling</a></li>
<li><a href="">Mat</a></li>

</ul>
</li>
<li><a href="http://sarasoderberg.blogg.se/2012/september/kontakt.html">Kontakt</a></li>

<li><a href="http://www.bloglovin.com/blog/3324261/sara-soderberg">Följ mig</a>

</li>

</ul>

3. Klart! Nu kan du lägga in egna länkar i menyn och ändra utseendet själv om du vill.