Drop Down CSS ohne Java Script?? (IE 6,7)

[Onlinejunky]

Hi Leute,

brauche mal wieder eure Hilfe! Wir wollten gestern eine Website online stellen, aber dann haben wir gemerkt in alle Browser geht das Drop Down ohne Java Script nur halt wieder in dem beschi**enen IE nicht.

Am Anfang sind die Menüs einfach hängen geblieben und sind nicht mehr verschwunden, das wurde jetzt gelöst. Aber jetzt geht nur noch die erste Menü Stufe, die weiteren Unterfenster erscheinen dann nicht.(wenn active Scripting deaktiviert ist). Wie kann ich das ohne Java Script realisieren? Also ich bin nicht der Programmiere, aber ich werde es dann weitergeben. Vielen haben Java Script halt ausgeschaltet im IE und leider nutzen noch zu viele User diesen Browser.

Danke

Mfg

[huha]

Schön, daß du so viel Code mitlieferst, deshalb hast du auch schon so viele Antworten ;)

Ernsthaft: Ohne Code wird dir kaum jemand helfen können.

-huha

[Onlinejunky]

Ja, ich dachte ja nur ob es da eine Allgemeine Lösung für gibt. Dann würde ich das einfach mitteilen.

Sorry

[huha]

Die allgemeine Lösung gibt's allein deshalb schonmal nicht, weil es keine allgemeinen Dropdowns mit CSS gibt. Du hast ein Stück Code geschrieben, das CSS benutzt und jetzt nicht so tut, wie du willst, also brauchen wir den Code, um irgendwie helfen zu können.

-huha

[Onlinejunky]

Hi,

hier habt ihr Input. Habe ich gerade von der Programmiererin bekommen. Es scheint echt ein riesen Ding zu sein, ein reines CSS Menü ohne JS in allen Browsern zum laufen zu bringen. Das große Problem ist hier halt der IE.

Hier der Code:

#nav {
margin-top: -1px;
float: left;
width: 809px;
height: 24px;
list-style: none;
background: url(hg_rot_navi.jpg) no-repeat;

}

#nav ul {
list-style: none;
background: transparent;
font-weight: bold;

}


#nav li {
padding-top: 3px;
float: left;
width: 130px;
height: 24px;
color: #f8bba2;
text-decoration: none;
text-align: left;
border-right: 1px solid white;font-weight: bold;
}



#nav a:hover, #nav li:hover {color: #fffff0; text-decoration: none;
height: 24px;}




#nav li ul {
position: absolute;
margin-top: 5px;
left: -999em;
height: auto;
width: 130px;
border-bottom: 2px solid black;
border-right: 1px solid black;
z-index: 1;
}



#nav li li {
height: 20px;
background: url(pulldown_dunkel.png) no-repeat;
border: none;
display: block;
font-weight: normal;
padding:0;
width: 134px;
margin-left: -4px;
}

* html #nav li li {margin-left: 2px;height: 20px;}
*+html #nav li li, * html #nav li li {margin-left: 1px;height: 20px;}
*+html #nav li ul {margin-top: 15px; margin-left: -55px;width:
134px;display: block;}
* html #nav li ul {margin-top: 15px; margin-left: -65px;}

#nav li li a:hover {
display: block;
width: 100%;
height: 20px;
background: url(pulldown_hell.png) no-repeat;}

#nav li li a {
display: block;
height: 20px;
width: 100%;
color: #fff;
text-decoration: none;
}



#nav li ul ul {
margin: -1.6em 0 0 139px;
}

* html #nav li ul ul {margin-top: -1.3em; margin-left: 130px; }
*+html #nav li ul ul {margin-top: -1.1em; margin-left: 128px;}
*+html #nav li ul ul li {height: 20px;}

#nav li ul li a:hover {
color: black;
display: block;
height: 20px;
width: 100%;
}


#nav li ul ul li a {width: 100%; display: block; background:
url(pulldown_hell.png) no-repeat;}

#nav li:hover .current , #nav li:hover ul ul, #nav li:hover ul ul ul,
#nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;

}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav
li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
color: #fffff0;height: 20px;


}

#nav .current {
color: #fff;
background: transparent;
font-weight: bold;
padding-left: 0.3em;
width: 134px;
}

#nav li, #nav li a {padding-left: 0.3em ; color: #f8bba2;
text-decoration: none;height: 20px;}


Gruß

[DanMan]

Im IE <7 geht es definitiv nicht ohne JS. Du brauchst nämlich Unterstützung für li:hover, und das gibt er nicht her.

Im IE7 sollte es aber funktionieren, wenn es im FF, Opera, Safari usw. funktioniert. Hab mir euer CSS nicht groß angeguckt, weil das ohne zugehöriges HTML nicht viel aussagt.

[rotalever]

Im IE <7 geht es definitiv nicht ohne JS. Du brauchst nämlich Unterstützung für li:hover, und das gibt er nicht her.

Ich glaube mit div:hover müsste es doch auch im IE gehen. Kann man dann eben nicht mehr mit li implementieren.

[DanMan]

Ich glaube mit div:hover müsste es doch auch im IE gehen. Kann man dann eben nicht mehr mit li implementieren.
Ne. Damit wollte ich zum Ausdruck bringen, dass der IE :hover nur für Anker (a) unterstützt, und das macht ein CSS Klappmenü unmöglich.

[rotalever]

Ich erinnere mich aber, dass ich das irgendwann mal im IE hinbekommen habe und ich glaube ohne javascript.