Dropdown Menü mit CSS

[Jacques]

Hallo zusammen,

ich habe mit einem Tutorial ein Dropdown Menü gebaut, das ich mit CSS umgesetzt habe. Leider komme ich bei einer Sache nicht weiter und hoffe auf eure Hilfe.
Ich bekomme es einfach nicht hin, die Überschrift auf dem Button nach unten zu bewegen, ohne das sich der Hover vom Button auch nach unten verschiebt, bzw. sich auch vergrößert.
Ich hoffe ich habs einigermaßen verständlich erklärt. Ich schicke den Code auch mit, vielleicht ist es ja nur eine Kleinigkeit die ich übersehe.
Vielen Dank schonmal!

            <div id="menuebox">
            
                <div class="menueleft">
                    <a href="#"><img name="logo" src="http://www.html.de/BILDER/logo.jpg" /></a>
                </div>
                

                <div class="menueright">
                
                    <div id="menue">
                
                        <div class="aussen">
                            <span class="menuetag"><h2>ÜBER UNS</h2></span>
                            <a class="innen-1" href="#">Systeme</a>
                            <a class="innen" href="#">Speicher</a>
                            <a class="innen" href="#">Laufwerke</a>
                            <a class="innen" href="#">Monitore</a>
                            <a class="innen" href="#">Drucker</a>
                            <a class="innen" href="#">Zubehör</a>
                        </div>
                
                        <div class="aussen">
                            <span class="menuetag"><h2>LEISTUNGEN</h2></span>
                            <a class="innen-1" href="#">Netzwerke</a>
                            <a class="innen" href="#">Server</a>
                            <a class="innen" href="#">Wartung</a>
                        </div>
                
                        <div class="aussen">
                            <span class="menuetag"><h2>REFRENEZEN</h2></span>
                            <a class="innen-1" href="#">Reparatur</a>
                            <a class="innen" href="#">Konfiguration</a>
                            <a class="innen" href="#">Software</a>
                            <a class="innen" href="#">Schulung</a>
                        </div>
                        
                        <div class="aussen">
                            <span class="menuetag"><h2>KONTAKT</h2></span>
                            <a class="innen-1" href="#">About Us</a>
                            <a class="innen" href="#">Partner</a>
                            <a class="innen" href="#">Referenzen</a>
                        </div>
                    
                    </div>
                
                </div>
                
                <div class="keyvisual">
                    <img name="keyvisual_referenzen" src="http://www.html.de/BILDER/keyvisual_referenzen.jpg"/>
                </div>

            </div>

html, body                                  
{ 
font-size: 11px; 
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
line-height:1.3em; 
text-align:left;  
margin:0; 
padding:0; 
background:url(../BILDER/hintergrund.gif) repeat-x; 
}

a                                                
{ 
text-decoration:none; 
}

h2                                               
{ 
font-size:1.2em; 
font-weight:normal;
}

a:active, a                                  
{ 
outline: none; 
}

:focus                                         
{ 
-moz-outline-style: none; 
}

:-moz-any-link:focus                    
{ 
outline: none;
}

*                                  
{
margin:0; 
padding:0; 
}

#menuebox                                
{
margin:auto; 
margin-top:20px; 
width:960px; 
height:483px; 
}

#menuebox .menueleft               
{ 
width:480px; 
height:187px; 
float:left; 
}

#menuebox .menueright             
{ 
width:480px; 
height:187px; 
float:right; 
}

#menue                                     
{
 position:absolute; 
}

#menue .aussen                         
{ 
float: left; 
display: block; 
overflow: hidden; 
width:118px; 
height:187px; 
text-align: center; 
background:#494949; 
color:#999; 
border-left:1px solid #1a1a1a; 
border-right:1px solid #5b5b5b; 
}

#menue .aussen:hover               
{ 
height: auto; 
background-color: #624617; 
color: #fff; 
}

a.innen-1                                   
{ 
margin-top: 173px; 
}

a.innen,
a.innen-1                                   
{ 
display: block; 
padding: 2px 0; 
text-decoration: none;  
border-bottom: 1px solid #78561d; 
background-color: #ecd8ae; 
color: #600; 
}

a:visited.innen,
a:visited.innen-1                        
{
 background-color: #ecd8ae; 
color:#555; 
}

a:hover.innen,
a:hover.innen-1                         
{ 
background-color: #f7eedb; color: #900; 
}

 

[Jacques]

So sieht es aus wenn ich die h2 mit margin nach unten bewege.

 

[Jacques]

Und so soll es aussehen (die Farben e.t.c. bitte außer acht lassen, die werden noch angepasst)

 

[Wustersoss]

Du musst in dein CSS folgendes hinzufügen:

#menue h2 {
    padding-top:171px;
    margin-bottom:-171px;
}

Das ist zwar nicht die Ultima Ratio, zeigt aber das Verhalten welches du erwartest.

Begründung:
Dein Code ist nicht semantisch, eine Überschrift 2. Ordnung hat im Menü nichts verloren, aber wer möchte schon deinen Code umschreiben.
Daher dieser Lösungsansatz.
Du hast im Menü die erste Ebene als Überschrift H2. Du verwendest eine Schriftgrösse von 11 Pixeln und dein Menü ist in der Höhe auf 183 Pixeln begrenzt.
Wir geben dem H2 also einen Innen-Abstand nach oben von 183-11 = 172 Pixel plus 1 Pixel für die Optik macht 171 Pixel Abstand nach oben.
Da nun beim hover das Submenü auch 171 Pixel nach unten verschoben wird, geben wir dem H2-Tag einen negativen Abstand nach unten um nachfolgende Elemente unten wieder an unsere Ausgangslinie zu ziehen.

Wie gesagt ist eine unsaubere Lösung aber macht was du möchtest.

 

[Jacques]

Wow vielen Dank, auf diese Lösung wäre ich wohl nicht gekommen. Super Erklärung! Auch das mit der Überschrift wusste ich nicht. Ich werde auf jeden Fall daran arbeiten, den Code in Zukunft sauberer zu schreiben.