Erstes Kind will nicht wies soll^^

html.de-Forum HTML, XHTML & CSS
1

Im folgenden Code bau ich mir aus Übungszwecken grad n simples CSS Auffaltmenü.
Ich will das zwischen dem Element, aus welchem die Untereinträge herausfahren, und den Ausgefahrenen Elementen ein deutlicherer Abstand in Form des Rahmens.
Drum spreche ich das erste Kind des Aufgeklappten Menüs an und sage ihm das er oben einen Rahmen von 500px haben soll, was der böse Bengel aber nicht tut.
Wie kann ich das anders lösen?

Verzeiht den schrecklichen Code, kann zwar einigermaßen Css bastel aber zum ersten mal ein hovermenü, hatte ich zuvor immer mit Javascript gemacht.

[Code]<?xml version="1.0" encoding="UTF-8" ?>

* {padding:0px; margin:0px; } ul li { background-color: #FD2700; float: left; margin: 0px 5px; width: 200px; text-align: center; border: solid black; font-weight:bold; color:yellow;

}
[SIZE=5]ul li:hover ul:first-child[/SIZE]
{
border-top-width:500px;

}

ul
{
list-style-type: none;
}

ul li ul
{
display: none;
}

ul li:hover ul
{
display: block;
padding:0px;
margin:0px;

}

ul li:hover ul li
{

     margin:0px;
     border-width: 1px 0;

}

li:hover
{
background-color: #FB4607;
color:#07F3FA;
}

body
{
background-color:#00FF4F
}

ul li:hover ul li a:link
{
text-decoration: none;

    color: #FAFB07;

}

  • Hallo 
    •      <li>
             Hallo
             <ul>
                     <li><a href="#">Blaa</a></li>
                     <li><a href="#">Blaa</a></li>
                     <li><a href="#">Blaa</a></li>
                     <li><a href="#">Blaa</a></li>
             </ul>
     </li>


     <li>
             Hallo
             <ul>
                     <li><a href="#">Blaa</a></li>
                     <li><a href="#">Blaa</a></li>
                     <li><a href="#">Blaa</a></li>
                     <li><a href="#">Blaa</a></li>
             </ul>
     </li>
[/Code]

so sieht es aus:
http://bthost.de/bthost/files/04.09.2009/Wie_es_aussieht.jpg

so soll es aussehen:
http://bthost.de/bthost/files/04.09.2009/Wie_es_aussehen_soll.jpg

MfG

2

Hallo Imbericle,
es müsste heißen:

ul li:hover [size=6]li[/size]:first-child
{
         border-top-width:500px;
}

first-child: Das erste „Kind“ eines Elements: CSS-Referenz auf CSS 4 You - The Finest in Stylesheets

3

Ah ok, vielen dank, dann hatte ich das falsch verstanden, ich dachte man müsste das Elternelement benennen.

MfG