• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Div in UL alternative

Hi,

ich habe eine horizontale Navigation (wie hier im Forum) diese hat Sub-Menüs,
das Sub-Menü wird so ausgeklappt (.navigation ul li:hover > ul {display: block}).

Nur würde ich dem Untermenü ein bisschen margin-top geben, sodass es nicht am hauptmenü dranklebt.
wenn ich das mache, dann hab ich logischerweise einen kleinen spalt zwischen hauptmenü und untermenü.
dann hab ich das problem, dass ich ja das li nicht mehr hovere und das untermenü sofort wieder zuklappt...

jetzt war meine idee einfach in das untermenü "ul" einen div rein zu klatschen und der ul ein padding-top geben.
klappt wunderbar ist aber leider nicht valid.

kennt wer ne andere lösung?
 
Werbung:
Werbung:
Wenn Du validen HTML-Code willst, dann ist die Lösung für validen HTML-Code nicht per CSS zu finden.

Wenn man dir bei deinem Lücken-Problem helfen soll wäre ein Link zur betreffenden Seite sicherlich hilfreich.
 
Mach aus dem margin-top ein padding-top, nimm dem aufklappenden <ul> die Hintergrundfarbe weg und ergänze die Hintergrundfarbe bei den Links im Aufklappmenü.
 
Werbung:
hi threadi,

das ist grundsätzlich die lösung die ich auch schon in verwendung hatte,
wenn ich aber die UL z.b. abrunden möchte oder eine speechbubble daraus machen will, dann muss ich die UL stylen...
 
Was vom <ul> willst Du abrunden, wenn <ul> keine Hintergrundfarbe hat? Die Rundungen kannst Du genauso gut per :last-child und :first-child dem letzten bzw. ersten <li>-Elemente darin geben.
 
Guck mal ob du es so möchtest
Code:
nav {
   background: #dbdbdb;
}

nav ul {
   list-style: none;
   margin: 0;
   padding: 0;
}

nav ul:after {
   content: "";
   display: block;
   height: 0;
   clear: both;
}

nav ul li {
   float: left;
}

nav ul li:hover > ul {
   display: block;
}

nav ul li a {
   text-decoration: none;
   padding: 20px;
   display: block;
   color: #242424;
  background:#dbdbdb;
}


nav ul li ul {
   display: none;
   position: absolute;
   padding-top:20px;
}

nav ul li ul li:first-child a {
 boedrer:1px solid #000;
 border-radius:10px 10px 0 0;
}

nav ul li ul li:last-child a {
 boedrer:1px solid #000;
 border-radius:0 0 10px 10px;
}

nav ul li ul li {
   float: none;
   
}

nav ul li ul li a {
   color: #fff;
  background:#444;
}
 
Werbung:
danke für den vorschlag, aber ne auch ned wirklich ... ich will das wirklich die UL einen abtand von dem LI hat aber die navigation mit dem hoveren noch funkt...
 
danke für den vorschlag, aber ne auch ned wirklich ... ich will das wirklich die UL einen abtand von dem LI hat aber die navigation mit dem hoveren noch funkt...

Ist mir jetzt zu mühsam alles durchzulesen.

Aber: Wurde das schon erwähnt?

Code:
ul > li > ul {
  background:none;
  padding-top:20px;
}
ul > li > ul > li {
  background:#242424;
}

und abrunden

Code:
ul > li > ul > li:first-child {
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}
ul > li > ul > li:last-child {
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
 
Werbung:
Zurück
Oben