Links aus Submenü werde nicht erkannt

[lucarp]

Hallo,

Ich habe ein Menü aus drei großen Buttons erstellt. Beim Hover soll jeweils ein Submenü erscheinen, was auch einwandfrei funktioniert (noch nur im Mozilla getestet) die Links aus dem Submenü werden jedoch von dem aus dem Hauptmenü überdeckt.

wenn man mit der Maus über die Submenüpunkte fährt, wird untem im Browser der richtige Link angezeigt, wenn man jedoch klickt ändert sich dieser.

Es ist nicht mein erstes Projekt bei dem ich mit dieser Art von Menü arbeite, jedoch hatte ich noch nie Probleme und kann mir gerade nicht erklären wo der Fehler liegt.

HTML CODE:

<div id="wellness">
            <a href="/produkte/wellness-und-gesundheit" title="Wellness & Gesundheit"><span>
            <ul>
            <li><a href="/produkte/wellness-und-gesundheit/dampfduschen" title="Dampfduschen">Dampfduschen</a></li>
            <li><a href="/produkte/wellness-und-gesundheit/saunen" title="Saunen">Saunen</a></li>
            <li><a href="/produkte/wellness-und-gesundheit/massagesessel" title="Massagesessel">Massagesessel</a></li>
            <li><a href="/produkte/wellness-und-gesundheit/wasseraufbereitung" title="Wasseraufbereitung">Wasseraufbereitung</a></li>
            <li><a href="/produkte/wellness-und-gesundheit/luftfiltration" title="Luftfiltration">Luftfiltration</a></li>
            </ul>
            </span></a>
            </div>
            
            <div id="outdoor">
            <a href="/produkte/outdoor" title="Outdoor"><span>
            <ul>
            <li><a href="/produkte/outdoor/kunstrasen" title="Kunstrasen">Kunstrasen</a></li>
            
            </ul>
            </span></a>
            </div>
            
            <div id="industrie">
            <a href="/produkte/industrie" title="Industrie"><span>
            <ul>
            <li><a href="/produkte/industrie/eismaschinen" title="Eismaschinen">Eismaschinen</a></li>
            </ul>
            </span></a>
          </div>

und die CSS dazu:

#wellness,
#outdoor,
#industrie {
    border:5px solid #efefef;
    width:316px;
    height:194px;
    float:left;
}

#wellness a,
#outdoor a,
#industrie a {
    width:316px;
    height:194px;
    display:block;
    outline:none;
}

#wellness {
    background:url(images/wellness.png) 0 0 no-repeat;
    margin-right:1px;
}

#outdoor {
    background:url(images/outdoor.png) 0 0 no-repeat;
    margin-right:1px;
}

#industrie {
    background:url(images/industrie.png) 0 0 no-repeat;
}

#wellness:hover {
    background:url(images/wellness.png) -316px 0 no-repeat;
    margin-right:1px;
}

#outdoor:hover {
    background:url(images/outdoor.png) -316px 0 no-repeat;
    margin-right:1px;
}

#industrie:hover {
    background:url(images/industrie.png) -316px 0 no-repeat;
}

http://tinyurl.com/388stgs

 

[mermshaus]

Edit: Ich korrigiere. Dein HTML-Code schachtelt <a>-Elemente und Blockelemente (<ul>) in <a>-Elemente. Es ist irgendwie kein Wunder, dass das nicht richtig geht. Das Markup ist absolut nicht valide.

 

[two-bee]

schau mal hier rein:
Das perfekte Menü: Klappmenü: Navigieren in Dimensionen | CSS, Javascript, Navigation | Dr. Web Magazin

und korrigiere zudem deinen Code, wie bereits erwähnt....