Hallo
Seit heute Früh kämpf ich schon um eine Lösung für mein Problem, bin aber noch nicht drauf gekommen.
Es ist so, dass ich für eine neue Webseite eine horizontale Navigation erstellen muss, bei der sich die Submenüs vertikal nach unten hin öffnen, wenn ich mit der Maus über einen Navigationspunkt fahre.
So weit so gut. Das funktioniert auch ohne Probleme.
Nur ist es so, dass ich bei einem Menüpunkt so viele Submenüpunkte habe, dass ich diese gerne in 3 Spalten nebeneinander darstellen möchte. Ist eigentlich auch kein Problem - außer im IE. Im FF funktioniert alles einwandfrei, aber der IE legt die 3
- , die im FF nebeneinander sind, übereinander.
- html div#Rahmen { /* Korrektur fuer IE 5.x /
width: 960px;
w\idth: 960px;
}
div#Rahmen div {
clear: left;
}
ul#Navigation { / ganze Navigation /
margin: 0;
padding: 0;
}
ul#Navigation li { / ALLE LIs /
list-style: none;
float: left; / ohne width - nach CSS 2.1 erlaubt */
position: relative;
padding: 0;
margin-bottom: -0.4em;
} - html ul#Navigation li { /* Korrektur fuer den IE /
margin-bottom: -0.4em;
}
ul#Navigation li ul { / Submenue /
margin: 10px 0 0 0;
padding: 0;
position: absolute;
top: 16px;
display: none; / Unternavigation ausblenden */
} - html ul#Navigation li ul { /* Korrektur fuer IE 5.x /
left: 0;
lef\t: 0;
}
ul#Navigation li:hover ul {
display: block; / Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
border: solid 1px #395588;
} - html ul#Navigation li ul li { /* Korrektur fuer IE */
float: none;
display: block;
border: solid 1px #395588;
} - ul#Navigation li ul li a { /* Korrektur fuer den IE /
height: 29px;
}
ul#Navigation a {
display: block;
width: 160px; / Breite den in li enthaltenen Elementen zuweisen */
text-decoration: none;
color: #395588;
background-color: #fff;
} - html ul#Navigation a, * html ul#Navigation span {
width: 160px; /* Breite nach altem MS-Boxmodell für IE 5.x /
w\idth: 160px; / korrekte Breite fuer den IE 6 im standardkompatiblen Modus /
}
ul#Navigation a:hover {
color: #dd8c19;
background-color: white;
}
/ … BUTTONS … */ - Unternehmen
- Produkte
- ALFASAN-PP-R-Trinkwassersystem dunkelblau
- AUSTROSAN-PP-R-Trinkwassersystem hellblau
- ALU-PE-X-Verbundrohre
- HENCO-ALU-PE-X-Verbundrohre
- REVI-Kunststoff-Schiebehülsensystem
- HENCO-Kunststoffpress-System
- HENCO-VISION-Stecksystem
- POLYSAN-Press-System
- POLYSAN-Pressfittings TH-Compact
- Service
- Referenzen
- Aktuelles
- Kontakt
Ich komm leider nicht drauf. Kann jemand helfen?
CSS
[CODE]
body, p a {
font: normal 100.01% Verdana, Geneva, sans-serif;
color: black;
background-color: #ffffe0;
}
div#Rahmen {
width: 960px;
}
ul#Navigation li ul li a.unternehmenliste {
width: 260px;
height: 25px;
padding-left: 5px;
}
ul#Navigation li ul li a.serviceliste, ul#Navigation li ul li a.refnewsliste {
width: 200px;
height: 25px;
padding-left: 5px;
}
ul#Navigation li ul li a.produkt1 {
width: 280px;
height: 25px;
padding-left: 5px;
}
ul#Navigation li ul li a.produkt2 {
width: 260px;
height: 25px;
padding-left: 5px;
}
ul#Navigation li ul li a.produkt3 {
width: 220px;
height: 25px;
padding-left: 5px;
}
li#unternehmen a.topmenue {
background-image: url(material/navigation/unternehmen.jpg);
width: 160px;
height: 25px;
text-indent: -9999px;
}
li#unternehmen a.topmenue:hover {
background-image: url(material/navigation/unternehmen-hover.jpg);
width: 160px;
height: 25px;
}
li#produkte a.topmenue {
background-image: url(material/navigation/produkte.jpg);
width: 160px;
height: 25px;
text-indent: -9999px;
}
li#produkte a.topmenue:hover {
background-image: url(material/navigation/produkte-hover.jpg);
width: 160px;
height: 25px;
}
li#service a.topmenue {
background-image: url(material/navigation/service.jpg);
width: 160px;
height: 25px;
text-indent: -9999px;
}
li#service a.topmenue:hover {
background-image: url(material/navigation/service-hover.jpg);
width: 160px;
height: 25px;
}
li#referenzen a.topmenue {
background-image: url(material/navigation/referenzen.jpg);
width: 160px;
height: 25px;
text-indent: -9999px;
}
li#referenzen a.topmenue:hover {
background-image: url(material/navigation/referenzen-hover.jpg);
width: 160px;
height: 25px;
}
li#aktuelles a.topmenue {
background-image: url(material/navigation/aktuelles.jpg);
width: 160px;
height: 25px;
text-indent: -9999px;
}
li#aktuelles a.topmenue:hover {
background-image: url(material/navigation/aktuelles-hover.jpg);
width: 160px;
height: 25px;
}
li#kontakt a.topmenue {
background-image: url(material/navigation/kontakt.jpg);
width: 160px;
height: 25px;
text-indent: -9999px;
}
li#kontakt a.topmenue:hover {
background-image: url(material/navigation/kontakt-hover.jpg);
width: 160px;
height: 25px;
}
#produktliste1 {
z-index: 102;
}
#produktliste2 {
z-index: 101;
left: 285px;
}
#produktliste3 {
z-index: 100;
left: 550px;
}
[/CODE][B]
HTML[/B]
[HTML]