---
title: "Dubbla klasser"
type: "forum-thread"
url: "https://www.webforum.nu/amne/html-css/124240-dubbla-klasser"
topic: "HTML & CSS"
topic_url: "https://www.webforum.nu/amne/html-css"
author: "web00132"
published: "2005-03-12T16:09:22.000Z"
updated: "2005-03-12T19:27:15.000Z"
replies: 3
views: 256
page: 1
pages: 1
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/html-css/124240-dubbla-klasser"
---

# Dubbla klasser

## #1 — web00132, 2005-03-12T16:09Z

Jag har en drop-down-meny i javascript och css där jag inte fattar hur jag ska få en hover-effekt på själva länkarna. Här är hela min css-kod:

```
.ddmx {
    font: 11px tahoma;
}
.ddmx .item1,
.ddmx .item1:hover,
.ddmx .item1-active,
.ddmx .item1-active:hover {
    padding: 5px 25px 5px 25px;
    background: #1122aa;
    font: 12px arial;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    position: relative;
}
.ddmx .item2,
.ddmx .item2:hover,
.ddmx .item2-active,
.ddmx .item2-active:hover {
    padding: 3px 8px 4px 8px;
    font: 11px tahoma;
    color: #000000;
    font-weight: bold;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    position: relative;
    z-index: 500;
}
.ddmx .item2 {
    background: #e5e1da;
}
.ddmx .item2:hover,
.ddmx .item2-active,
.ddmx .item2-active:hover {
    background: #ffffff;
}
.ddmx .arrow,
.ddmx .arrow:hover {
    padding: 3px 16px 4px 8px;
}
.ddmx .item2 img,
.ddmx .item2-active img{
    position: absolute;
    top: 4px;
    right: 1px;
    border: 0;
}
.ddmx .section {
    border: 1px solid #b8b4ae;
    position: absolute;
    visibility: hidden;
    z-index: -1;
}

* html .ddmx td { position: relative; } /* ie 5.0 fix */
```

 Och här kommer en bit (början) av html-koden:

```
    <table cellspacing="0" cellpadding="0" id="menu1" class="ddmx">
    <tr>
        <td>
            <a class="item1" id="#test" href="http://www.blablabla.com/">huvudlänk 1</a>
        </td>

        <td width="2">
        </td>

        <td>
            <a class="item1" href="javascript:void(0)">huvudlänk 2</a>
            <div class="section">
                <a class="item2" href="example1.html">underlänk 1</a>
                <a class="item2" href="example1.html">underlänk 2</a>
                <a class="item2" href="example1.html">underlänk 3</a>
                <a class="item2" href="example1.html">underlänk 4</a>
                <a class="item2" href="example1.html">underlänk 5</a>
            </div>
        </td>
```

 Som ni ser används nån typ av dubbla klasser - dels .ddmx och dels .item1 respektive .item2. Hur funkar detta? Och hur ska jag lägga till en hover-effekt så länktexten ändras från "color: #ffffff;" till t ex "color: #000000"? I css-koden används redan attributet 'hover' ser det ut som, vad innebär det?

Hoppas ni förstår bättre än jag!

Permalänk: https://www.webforum.nu/p/124240

## #2 — bossse, 2005-03-12T17:17Z

Ta bort .ddmx .item1:hover, .ddmx .item1-active, .ddmx .item1-active:hover och flytta ner dessa enl. mitt exempel så bör det funka

```

.ddmx {
    font: 11px tahoma;
}
.ddmx .item1
 {
    padding: 5px 25px 5px 25px;
    background: #1122aa;
    font: 12px arial;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    position: relative;
}

.ddmx .item1:hover,
.ddmx .item1-active,
.ddmx .item1-active:hover
{color:#000000; }
```

resten av din css  är väl ok!

Permalänk: https://www.webforum.nu/p/1571779

## #3 — web00132, 2005-03-12T18:04Z

Aha! De där kommatecknen borde jag ju lagt märke till. Tror jag hajar nu. Tacka ska du ha!

Permalänk: https://www.webforum.nu/p/1571792

## #4 — bossse, 2005-03-12T19:27Z

OK! Eeftersom du har svart text så bör du ju ha bakgrunden lite ljusare vid hover enl. mig. Syns bättre då!

```
.ddmx .item1:hover,
.ddmx .item1-active,
.ddmx .item1-active:hover
{color:#000000; background: #3333FF;}
```

Permalänk: https://www.webforum.nu/p/1571805

---

Tråden på webben: https://www.webforum.nu/amne/html-css/124240-dubbla-klasser