Sannas Bloggtips - Dropdown-meny

Dropdown-meny

Stilmallskod
#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: 3px 8px; background-color: none; /*Ändra färgen på menyflikarna här*/ color: #000000; /*Ändra färgen på texten här*/ text-decoration: none; font-family: tahoma; /*Ändra typsnittet här*/ font-size: 10px; } /*Ändra storleken på texten här*/ #navbar li ul { display: none; width: 10em; /* Ändra bredden på undermenyn här */ } #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: #ffffff; /*Ändra färgen på undermenyn*/ opacity: 0.6; border-bottom: 1px dotted #B3B3B3; border-left: 1px solid #fff; border-right: 1px solid #fff; color: #000000; } /*ändra textfärgen på undermenyn här*/ #navbar li li a:hover { background-color: #574948; } /*Ändra färgen när man håller musen över undermenyn*/

Kodmallskod
<ul id="navbar"> <li><a href="#">Överkategori</a> <ul> <li><a href="http://adresshär" rel="nofollow">Länk1</a></li> <li><a href="http://adresshär" rel="nofollow">Länk2</a></li> <li><a href="http://adresshär" rel="nofollow">Länk3</a></li> <li><a href="http://adresshär" rel="nofollow">Länk4</a></li> </ul> </li> <li><a href="#">Överkategori</a> <ul> <li><a href="http://adresshär" rel="nofollow">Länk1</a></li> <li><a href="http://adresshär" rel="nofollow">Länk2</a></li> </ul> </li> <li><a href="#">Överkategori</a> <ul> <li><a href="http://adresshär" rel="nofollow">Länk1</a></li> <li><a href="http://adresshär" rel="nofollow">Länk2</a></li> <li><a href="http://adresshär" rel="nofollow">Länk3</a></li> <li><a href="http://adresshär" rel="nofollow">Länk4</a></li> <li><a href="http://adresshär" rel="nofollow">Länk5</a></li> </ul> </li>

Om du vill lägga till en till länk som underkategori, klistra då in denna kod efter < / a>< /li > och innan < / ul>< / li>
<li><a href="">Länktext</a></li>

Om du vill lägga till en nytt stycke, alltså en överkategori + underkategori, lägg till denna kod efter < / ul> < / li > och innan < li >< a href="#" >Överkategori< /a>