Mahriel
Neues Mitglied
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 <ul>, die im FF nebeneinander sind, übereinander.
Ich komm leider nicht drauf. Kann jemand helfen?
CSS
HTML
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 <ul>, die im FF nebeneinander sind, übereinander.
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;
}
* 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.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;
}
* 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 ................................. */
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;
}HTML
HTML:
<body>
<div id="Rahmen">
<ul id="Navigation">
<li id="unternehmen"><a href="#Beispiel" class="topmenue">Unternehmen</a>
<ul>
<li><a href="#Beispiel" class="unternehmenliste">Polysan: Rohrsysteme für alle Anwendungen</a></li>
<li><a href="#Beispiel" class="unternehmenliste">Experten für hochwertige Lösungen</a></li>
<li><a href="#Beispiel" class="unternehmenliste">Vorteile durch starke Marken</a></li>
<li><a href="#Beispiel" class="unternehmenliste">Sicherheit für Jahrzehnte</a></li>
<li><a href="#Beispiel" class="unternehmenliste">Lageplan</a></li>
<li><a href="#Beispiel" class="unternehmenliste">Offenlegung</a></li>
</ul>
</li>
<li id="produkte"> <a href="#Beispiel" class="topmenue">Produkte</a>
<ul id="produktliste1">
<li><a href="#Beispiel" class="produkt1">ALFASAN-PP-R-Trinkwassersystem dunkelblau</a></li>
<li><a href="#Beispiel" class="produkt1">AUSTROSAN-PP-R-Trinkwassersystem hellblau</a></li>
<li><a href="#Beispiel" class="produkt1">ALU-PE-X-Verbundrohre</a></li>
<li><a href="#Beispiel" class="produkt1">HENCO-ALU-PE-X-Verbundrohre</a></li>
<li><a href="#Beispiel" class="produkt1">REVI-Kunststoff-Schiebehülsensystem</a></li>
<li><a href="#Beispiel" class="produkt1">HENCO-Kunststoffpress-System</a></li>
<li><a href="#Beispiel" class="produkt1">HENCO-VISION-Stecksystem</a></li>
<li><a href="#Beispiel" class="produkt1">POLYSAN-Press-System</a></li>
<li><a href="#Beispiel" class="produkt1">POLYSAN-Pressfittings TH-Compact</a></li>
</ul>
<ul id="produktliste2">
<li><a href="#Beispiel" class="produkt2">EUROTUBI Edelstahl-Press-System WASSER</a></li>
<li><a href="#Beispiel" class="produkt2">EUROTUBI Edelstahl-Press-System GAS</a></li>
<li><a href="#Beispiel" class="produkt2">EUROTUBI-C-Stahl-Press-System Heizung</a></li>
<li><a href="#Beispiel" class="produkt2">CONEX Push-Fit-Steckfitting</a></li>
<li><a href="#Beispiel" class="produkt2">OYSTER-Fittings</a></li>
<li><a href="#Beispiel" class="produkt2">AUSTROFLEX-Solarrohrsysteme</a></li>
<li><a href="#Beispiel" class="produkt2">AUSTROFLEX-Fernwärmesysteme</a></li>
<li><a href="#Beispiel" class="produkt2">EDELSTAHL-FBH-Verteiler & -stämme</a></li>
<li><a href="#Beispiel" class="produkt2">ALUMINIUM-Sole-Verteiler</a></li>
</ul>
<ul id="produktliste3">
<li><a href="#Beispiel" class="produkt3">Wand- und Fußbodenheizung</a></li>
<li><a href="#Beispiel" class="produkt3">Kugelhähne, Armaturen</a></li>
<li><a href="#Beispiel" class="produkt3">Verschraubungen, Rotguss-Fittings</a></li>
<li><a href="#Beispiel" class="produkt3">HT-Abfluss-System</a></li>
<li><a href="#Beispiel" class="produkt3">VALSIR-TRIPLUS-Abfluss-System</a></li>
<li><a href="#Beispiel" class="produkt3">SILERE Schallschutz-Abfluss-System</a></li>
<li><a href="#Beispiel" class="produkt3">MONTAGEBOXEN</a></li>
<li><a href="#Beispiel" class="produkt3">x</a></li>
<li><a href="#Beispiel" class="produkt3">x</a></li>
</ul>
</li>
<li id="service"><a href="#Beispiel" class="topmenue">Service</a>
<ul>
<li><a href="#Beispiel" class="serviceliste">Barcode</a></li>
<li><a href="#Beispiel" class="serviceliste">HENCO-Montage-Videos</a></li>
<li><a href="#Beispiel" class="serviceliste">Ausschreibungstexte</a></li>
<li><a href="#Beispiel" class="serviceliste">Downloads</a></li>
<li><a href="#Beispiel" class="serviceliste">Katalog-Bestellung</a></li>
<li><a href="#Beispiel" class="serviceliste">Sitemap</a></li>
</ul>
</li>
<li id="referenzen"><a href="#Beispiel" class="topmenue">Referenzen</a>
<ul>
<li><a href="#Beispiel" class="refnewsliste">Referenzen Übersicht</a></li>
<li><a href="#Beispiel" class="refnewsliste">Referenzen Archiv / Suche</a></li>
</ul>
</li>
<li id="aktuelles"><a href="#Beispiel" class="topmenue">Aktuelles</a>
<ul>
<li><a href="#Beispiel" class="refnewsliste">Aktuelles Übersicht</a></li>
<li><a href="#Beispiel" class="refnewsliste">Aktuelles Archiv / Suche</a></li>
</ul>
</li>
<li id="kontakt"><a href="#Beispiel" class="topmenue">Kontakt</a></li>
</ul>
<div></div>
</div>
</body>