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.

    Dette skjemaet er beskyttet av reCAPTCHA.
    Googles Personvernregler og vilkår for bruk er gjeldende.

Siste innlegg