"border-collapse" für "ul" ?`

[lowsaxonian]

Moin Forianer,

die Frage ist etwas seltsam gestellt, aber mir fiel keine bessere Umschreibung ein.
Ich suche eine Funktion wie eben "border-collapse", nur nicht für "table", sondern für "ul". Hintergrund ist folgender: ich habe mir ein Menü gebastelt (Code siehe unten), welches nach dem Hovern die nächste(n) Ebene(n) überspringt. Mit einer Funktion analog "border-collapse" wäre dieser unschöne Effekt auszulöschen (bei der alten table-Navi hat funktioniert).

Den Code habe ich etwas eingekürzt, um nicht zu viel Text einzufügen:

<ul id="Navigation">
<li><a href="bla.html" target="main"><b>blalbla</b></a></li>

<li><a href="bla/blalba.html" target="main">blalblabla</a></li>

<li><a href="bla/blabli.html" target="main">blaurot</a></li>

<li><h3>huch</h3>
<ul class="Rahmen">
<li><a href="blub/blubber1.html" target="main">Blubberblasen</a></li>
<li><a href="blub/blubber.html" target="main">Blubberbkäschen</a></li>
</ul>
</li>


</div>

</body>
</html>

css ist unverändert:

#Navigation h3 {
font-size:12pt;
font-weight:normal;
text-align:center;
color:#000000;
background:#88c555;
}
#Navigation h3 {
width:9.4em;
margin-top:0;
margin-bottom:0;
}
div#Rahmen          { width:10em;
                      padding: 0.1em 0em 0.1em 0.3em; }

div#Rahmen          { margin-left:0.1em;
                      margin-right:0.1em; }

div#Rahmen      div { clear:both; }

ul.Rahmen           { width:9.8em;
                      padding: 0.1em 0.1em 0.1em 0.5em; }

ul.Rahmen           { margin-left:0.1em;
                      margin-right:0.1em; }

ul#Navigation li    { list-style:none;
                      float:none;
                      position:relative;
                      margin:0.1em;
                      padding:0; }

ul#Navigation       { margin:0;
                      padding:0;
                      text-align:center;
                      font-family:arial, verdana, sans serif;
                      font-size:12pt; }

ul#Navigation li ul { margin:0em 0.1em 0.1em 1.2em;
                      padding:0;
                      position:relative;
                      top:0;
                      left:-0.4em;
                      display:none; }

ul#Navigation li:hover ul
                    { display:block; }

ul#Navigation li ul li
                    { float:none;
                      display:block;
                      margin-bottom:0.1em; }

ul#Navigation a, ul#Navigation span
                    { display:block;
                      width:9em;
                      padding:0.2em 0.2em;
                      text-decoration:none;
                      background-color:#88c555; }

li a#aktuell        { Color:#000000;
                      background-color:#88c555; }

ul#Navigation li ul span
                    { background-color: #ff0000; }

ul#Navigation a:link
   { text-decoration:none;
     font-style:italic;
     font-style:normal;
     color:#000000; }

ul#Navigation a:hover
   { text-decoration:none;
     background-color:#88c555;
     font-weight:bold;
     font-style:italic;
     color:yellow; }

ul#Navigation a:active
   { text-decoration:none;
     background-color:threedface;
     font-style:normal;
     font-weight:normal;
     color:#000000; }

Wäre schön, wenn Ihr einen passenden Tipp für mich hättet.
Grüsse
low

 

[Efchen]

Ich verstehe nicht, was Du mit "welches nach dem Hovern die nächste(n) Ebene(n) überspringt" meinst.
Aber borders bei Listen collapsen eigentlich immer, wenn Du kein margin angibst. Dass das anders ist, gibt es IMHO nur bei Tabellen.

 

[lowsaxonian]

...vermutlich bin ich die Sache falsch angegangen. Wenn Du in dieser Navi z.B. auf "Restaurant/Bilder" gehst und dann weiter nach unten, hätte ich gerne den nächsten, der Liste folgenden Navipunkt (in diesem Falle eben "Räumlichkeiten") angesprungen. Tatsächlich aber steht der Cursor auf den Punkt, wo er auf dem Monitor/Viewport zu stehen hat, in meinem Beispiel also im "luftleeren Raum".
Die neue Frage lautet also:
- ist ein verzögertes Schliessen der aufgeklappten Navi möglich, womit ich dann den nächsten Punkt annavigieren könnte, oder wieder wild mit der Maus "rumzufuchteln"?
Grüsse
low

 

[Efchen]

Naja, ist doch logisch, dass da der Cursor steht. Woanders erwartet man ihn auch nicht. Ich wäre verwirrt, wenn der plötzlich weiter oben stünde.

Wie wärs, wenn Du das "Ausklappen" aus dem Textfluss nimmst und die anderen Menüpunkte überlappst? Dann hast Du auch nicht diesen "Wackeleffekt".

 

[lowsaxonian]

OK, Wackeleffekt entfernt. Trotzdem nochmals die Frage: ist ein verzögertes Schliessen der aufgeklappten Navi möglich ?

 

[neuroleptika]

ist ein verzögertes Schliessen der aufgeklappten Navi möglich ?

Mit reinem css nicht.
Mit Javascript funktioniert sowas bei onmouseout mit setTimeout.

 

[lowsaxonian]

@ neuroleptika
Danke, Java kann ich noch nicht, aber ich hab´ ja noch´n büschen Zeit...
Grüsse
low

 

[threadi]

Java musst Du dafür auch nicht lernen.