Html/Css Untergruppe funktioniert nur halb...

[BlindC0der]

Also ich melde mich hier mal schon wieder mit einem neuen Problem:

body
{
  background-color: #E5E5E5;
  background-image:url('back.png');
  background-repeat:repeat-y;
  background-position:center;
}

#header a:link { color:white; text-decoration:none; }
#header a:hover { color:white; text-decoration:underline}
#header a:visited { color:white; text-decoration:none; }
#header
{

  margin-left:auto;
  margin-right:auto;
  background-image:url('header.png');
  background-repeat:no-repeat;
  font-family: arial, verdana, sans-serif;
  font-size: 14px;
  text-decoration: none;
  color: white;
  width: 1050px;
  height: 315px;

}

...


#und
{
  color: #c40066;
  font-size: 14px;
}
#und a:hover {
  color: white; font-weight: bold; background: #C40066
  }

Also ich hab in der Gruppe #Header ja bestimmte Hover Effekte angegeben die bei den Links im Header passieren sollen. Jetzt das Problem: Ich habe zu einem der Links im Header ein untermenü hinzugefügt.

<div id="header">
	<table
 style="width: 100%; height: 99%; text-align: left; margin-left: auto; margin-right: auto;"
 border="0" cellpadding="0" cellspacing="0">
  <tbody>
    <tr>
      <td width="93"></td>
	  <td width="136"><a href="index.html">Startseite</a></td>
	  <td width="94"><a href="#">Aktuelles</a></td>
	  <td width="328"><a href="who.html">Wer gehört dazu?</a></td>
	  <td width="134"><input type=hidden name=arav value="1*#*#*2"><ul id='nav'>
<li> <a href="#">Aktivitäten</a>
<ul>
<li style='background-color:white;'><a href="#"><div id="und"> 1. Link</div></a></li>
<li style='background-color:white;'><a href="#"><div id="und"> 2. Link</div></a></li>
</ul>
</li>
</ul></a></td>
	  <td width="103"><a href="#">Hilfen</a></td>
	  <td><a href="#">Impressum</a></td>
    </tr>
  </tbody>
</table>
    </div>

Nun ist der Hintergrund im Untermenü Weis und Nicht #C40066 (also so n komisches lila), und daher sollen die links (Oben im Code "1. Link" und "2. Link") nicht weis, sondern die farbe #c40066 haben, und beim Hover Effekt weis werden da sich die hintergrundfarbe des links dann in lila wechseln soll. Das sieht man im CSS Code ganz unten.

Dazu hab ich dann die gruppe "#und" gemacht, welche auch funktioniert somit sind die links lila im untermenü.

wenn ich dann allerdings mit der maus drüber fahre, bleibt alles so wie es ist, bzw der hover effekt vom #header wir bei link 1 und 2 angewnadt, obwohl sie sich ja zwischen <div id="und"> und </div> befinden !? Eigentlich sollte dann ja der Hover Effekt von #Und angewand werden!?

Mal ein Screen zu verdeutlichung:

Spoiler

So siehts untermenü ausgefahren aus!

wenn man jetz auf einen der links mit der maus geht soll sich der link hintergrund in lila und die textfarbe in weis ändern

Helft mir bitte^^ Danke Schonmal

Edit: Also im großen und ganzen ist die Frage warum bei "1.Link" und "2.Link" der hover effekt von #header und nicht von #und verwendet wird, und wie ichs ändern kann

 

[mercsen]

erstmal würde ich sagen das du ganz schnell das div aus dem a tag nehmen solltest.
das ist sonicht richtig, da div ein block element, a aber nur inline elemente enthalten darf. Und da liegt wohl auch der hund begraben.

mach einfach <a id="und">

außerdem darf eine ID nur GENAU einmal vorkommen.
Sinvoller wäre hier eine Klasse!

Also im CSS

.und{ }

statt

#und {}

und dann <a class="und">

und noch etwas.

#und a:hover

bedeutet folgendes:

Für alle "a" die in dem element "und" sind wende die oben aufgeführt regel an.

#und:hover { }

wäre hier richtig

 

[BlindC0der]

Also danke ersma für die schnelle Antwort
Jetz gibts aber folgendes problem... also ich hab den code so umgewandelt:

.und
{
  color: #c40066;
  font-size: 14px;
}
.und:hover {
  color: white; font-weight: bold; background: #C40066
  }

und in der html

<td width="137"><input type=hidden name=arav value="1*#*#*2"><ul id='nav'>
<li> <a href="#">Aktivitäten</a>
<ul><li style='background-color:white;'><a href="#"><a class="und"> 1. Link</class></a></li><li style='background-color:white;'><a href="#"><a class="und"> 2. Link</class></a></li>
</ul>
</li>

und jetz siets so aus:

Spoiler

Hier fahre ich grad mit der maus über Link 1...

1. Link is da jetz nur 1 text und der link befindet sich in der freien weissen fläche!?
Ich hab auch keine ahnung warum da jetz ne weisse fläche ist...

jetz werden die hover effekte von header und .und angewendet glaube ich^^

bitte weiterhelfen

 

[mercsen]

eieieieiei.
imletzen post wurden dir doch einige links genanntwo css erkkärt wird.
du solltest dich wenigstens mal mit den basics befassen.

class ist ein attribut und kein tag.

alsomüsste es richtigerweisewie folgt heißen

<li style='background-color:white;'><a href="#" class="und"> 1. Link</a>

 

[BlindC0der]

jo perfekt danke geht so auch wenn jetz noch n paar hover effekte iwi ausm header drin hänge aber damit kann ich leben^^ danke