jQuery Hovermenü - Delay einbauen?

[toni]

Hallo,
muss das Menü eigentlich mit jQuery gebaut werden? Bei Menüs wäre ich da sehr vorsichtig. Wenn jemand JavaScript nicht aktiviert hat, sieht er gar kein Menü....!
Das geht mit CSS wesentlich einfacher und ist damit auch ohne JavaScript
nutzbar.

LG
toni

Hier habe ich mal ein Beispiel mit CSS:
Zuerst mal html-Code. Es handelt sich hier um eine Liste mit nur einem Element. Innerhalb des li-Elements befindet sich ein Container mit dem Namen sub der eine bestimmte Formatierung hat. In diesem sind dann weitere Links mit Formatierungen enthalten. Geht der User jetzt mit der Maus über "Menü" öffnet sich per css das Unternmenü und er kann mit der Maus nach unten gehen und Link oder Link2 anklicken.

<ul id="navigation">  
                <li><a href="">Menü</a>  
                    <div class="sub">  
  
                        <div class="cont">  
                            <p>Text der den Link erläutert</p>  
                            <a href="xy.html">&raquo; Link</a>  
                        </div>  
  
                         <div class="cont">  
                           <p>Text der den Link erläutert</p>  
                            <a href="xcy.html">&raquo; Link2</a>  
                        </div>  
  
                        <br class="stopper" />  
                    </div>  
                </li>  
  
            </ul>

Hier das CSS (das kann man sicher schöner machen und anders lösen - aber es funktioniert). Da sind jetzt natürlich noch Formatierungen drin, die ich aus einem Projekt noch drin habe - aber das sollte nich stören.
Im Grunde geht es so, dass der ganze Container unterhalb des li erstmal nicht sichtbar ist. Wenn man jetzt mit der Maus über das Menü geht, wird der Container auf display:block geschaltet und man sieht alles. Da der Container innerhalb des li liegt, ist die ganze Fläche auch aktiv und verschwindet nicht wenn man die Maus vom Menü nach unten bewegt.
Wie gesagt - klappt auch ohne JS.

  
ul#navigation {  
    position:absolute;  
    width:239px;  
    height:auto;  
    left:0;  
    top:0;  
    z-index:2000;  
}  
  
ul#navigation li {  
    float:left;  
    position:relative;  
    background:#e50050;  
}  
  
ul#navigation li a {  
    display:block;  
    width:239px;  
    height:23px;  
    padding:7px 15px 0 10px;  
    color:#fff;  
    font-size:12px;  
    font-weight:bold;  
    text-decoration:none;  
}  
  
ul#navigation .sub {  
    position:absolute;  
    display:none;  
    left:0;  
    top:30px;  
    background:#e1e1e1;  
    width:960px;  
    height:400px;  
    border-top:1px solid #383733;  
    z-index:70;  
}  
  
ul#navigation .sub .cont {  
    float:left;  
    margin:25px;  
    padding:10px;  
    width:170px;  
    height:125px;  
    background:#fff;  
}  
  
ul#navigation .sub .cont a {  
    margin:30px 0 0 0;  
    color: #000;  
    font-size: 16px;  
    font-weight: bold;  
    padding:15px 0 0 0;  
}  
  
  
ul#navigation .sub .cont p {  
    font-size:12px;  
    color:#000;  
    font-weight:normal;  
    height:40px;  
}  
  
  
ul#navigation .sub .cont a:hover {  
    color:#e50050;  
}  
  
  
ul#navigation li:hover .sub {  
   display:block;  
}  
  
  

LG
Toni