Drop-Down meny

En nokså vanskelig kode, det kan hende at du må finne ut av enkelte ting selv!

}
#navbar {
margin: 0;
padding: 0;
height: 1em; }
#navbar li {
list-style: none;
float: left; }
#navbar li a {
display: block;
padding: 5px 10px;
background-color: #transparent;
color: #123456; /*Endre fargen på teksten her*/
text-decoration: bold;
font-family: Lucida Handwriting; /*Endre skrifttypen her*/
font-size: 15px; } /*Endre størrelsen på skriften her*/
#navbar li ul {
display: none;
width: 8,5em; /* Endre bredden på undermenyen her */
background-color: #FFFFFF;}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 1;
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: #F9BAAA; /*Endre fargen på undermenyen*/
border-bottom: 1px solid #F9BAAA;
color: #000000; } /*Endre tekstfargen på undermenyen her*/
#navbar li li a:hover {
background-color: #; } /*Endre fargen når man holder musen over undermenyen*/
#navbar li{ float: left; }
#navbar{
margin-left: 0px;
}
#navbar {
padding: 5px;
height: 2em;
width: left;
margin: 0px;
text-align: left;
}
#navbar li {
float: left;
list-style: none;
width: 157px;
background-color: #FFFFFF;
}
#navbar li a {
padding: 5px;
display: block;
border-bottom: 2px solid #C4E0FF;
color: #000000;
text-decoration: none;
font-family: arial;
font-size: 15px;
line-height: 15px;
}
#navbar li ul {
padding: 5px;
display: none;
width: em;
background-color: #fff;
}
#navbar li:hover ul, #navbar li.hover ul {
display: block;
position: absolute;
margin: 0;
padding: 0;
z-index: 1;
text-align: left;
}
#navbar li:hover li, #navbar li.hover li {
float: none;
}
#navbar li:hover li a, #navbar li.hover li a {
border-bottom: 1px dotted #D1D1C6;
color: #727272;
}
#navbar li li a:hover {
background-color: #D1D1C6;
}
#meny {
width: 950px;
margin-left: auto;
margin-right: auto;
}

(fargen og alt sånt har jeg funnet på selv)
Legg inn på: Stilsett/CSS
Også lagrer du. Ingenting vil skje. 


Etterpå går du til Maler/HTML og limer inn denne koden:

<ul id=”navbar”>
  <li><a href=”link til sida”>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>

Så bytter du det ut med det du vil.
 # = URL
Länk = Navnet/Teksten i drop-down
Kategori = “hovedskriften”

For å endre på størrelse, farger og slikt, må du gå til koden i Stilsettet og endre på den.

4 kommentarer
    1. hellestavsholt: Du må endre på til “Auto”:

      #meny {
      width: 950px;
      margin-left: auto; (her)
      margin-right: auto; (her)

      Prøv det, kanskje det går. Har sett litt på bloggen din, og jeg synes at den er litt for bred.

    Legg igjen en kommentar

    Obligatoriske felt er merket med *

    Takk for at du engasjerer deg i denne bloggen.
    Unngå personangrep og sjikane og prøv å holde en hyggelig tone selv om du skulle være uenig med noen.
    Husk at du er juridisk ansvarlig for alt du skriver på nett.

Siste innlegg