Horisontell dropmeny ovanför headern
Så jag tänkte visa hur man gör.
1. Gå in i din stilmall och lägg till följande kod längst ner.
#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: #cccccc; /*Ändra färgen på menyflikarna här*/
color: #fff; /*Ä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 {
display: none;
width: 10em; /* Ändra bredden på undermenyn här */
background-color: #69f;}
#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: #889988; /*Ändra färgen på undermenyn*/
border-bottom: 1px solid #fff;
color: #ffffff; } /*ändra textfärgen på undermenyn här*/
#navbar li li a:hover {
background-color: #000000; } /*Ändra färgen när man håller musen över undermenyn*/
Jag har lagt min precis under <div id="wrapper">. Men man kan lägga den var man vill.
<ul id="navbar">
<li><a href="#">Kategori 1</a>
<ul>
<li><a href="#">Länk 1</a></li>
<li><a href="#">Länk 2</a></li>
<li><a href="#">Länk 3</a></li>
</ul>
</li>
<li><a href="#">Kategori 2</a>
<ul>
<li><a href="#">Länk 4</a></li>
</ul>
</li>
<li><a href="#">Länk 5</a></li>
<li><a href="#">Kategori 3</a>
<ul>
<li><a href="#">Länk 6</a></li>
<li><a href="#">Länk 7</a></li>
<li><a href="#">Länk 8</a></li>
<li><a href="#">Länk 9</a></li>
</ul>
</li>
</ul>
<li><a href="#">Länk1</a></li>
Byt ut "#" mot adressen och byt ut "Länk 1" till det namn du vill att länken ska ha.