Dubbla klasser

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!

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!

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

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;}