nicht angemeldet
Guten Morgen Joachim;
ich habe mal dein Script umgesetzt, allerdings funktioniert der Hover-Effekt nicht mehr im IE6. Zudem kann ich in dem Main-Menü die Schriftfarbe beim Hovern nicht auf #FFFFFF setzen, diese bleibt immer Schwarz.
Hier der Code in der externen css datei
/* Menü */
#navi {
position:absolute;
top:50px;
right:0px;
margin:0px 0px 0px 0px;
padding:0px;
z-index:1}
#navi li {
position: relative;
font-size: 11px;
line-height:25px;
float: left;
padding: 0px 10px 0px 10px;
margin: 0px 0px 0px -1px;
list-style:none;
background-color:#FFFFFF;
border: 1px solid #003399;
overflow: visible;
}
/* Submenü */
#navi ul {
display: none;
text-align: left;
margin: 0px;
padding: 0px 0px 0px 0px;
position: absolute;
top: 25px;
left: -1px;
list-style: none;}
#navi ul li {
position: static;
margin: 0px 0px -1px 0px;
padding: 0px 15px 0px 15px;
white-space: nowrap;
border: 1px solid #003399;
font-size: 11px;
float: none;}
#navi a {
color: #000;
text-decoration: none;
font-size: 11px;}
#navi li:hover {
background: #003399;
color:#FFFFFF;}
#navi li:hover li:hover {
background: #b2c1e0;}
#navi li:hover ul {
display:block;}
Hier die HTML Datei:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<link rel="shortcut icon" href="favicon.ico" />
<link href="engine/variovac-styles.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 7]>
<style>
/*
ie6/7 gets confused if mouseover/out in an empty element
add dummy background image to make it believe there is something
*/
ul, li {
min-height: 1px;
background-image:url(leer.gif);
}
#navi ul li {
overflow: visible;
}
</style>
<![endif]-->
<!--[if lte IE 6]>
<style>
ul, li {
height: 1px;
}
#navi ul {
width: 1px;
}
</style>
<![endif]-->
<script type="text/javascript">
// inits navi hovers for ie6
//
function init_navi(id) {
// do nothing if not ie6
//
var is_ie6 = !!(document.all && navigator.appVersion.indexOf("MSIE 6.")!=-1);
if (!is_ie6) return;
var curr_ul = false;
var main_ul = document.getElementById(id);
var all_li = main_ul.getElementsByTagName("li");
// loop available list items
//
for (var i = 0; i < all_li.length; i++) {
// find out if sub-ul is available
// store sub-ul as property
//
curr_ul = all_li[i].getElementsByTagName("ul");
all_li[i].ul = curr_ul.length? curr_ul[0] : false;
// set onmouseover and out
// toggle class name
// toggle sub-ul's display
//
all_li[i].onmouseover = function () {
this.className = this.className + " navi-active";
if (!this.ul) return;
this.ul.style.display = "block";
}
all_li[i].onmouseout = function () {
this.className = this.className.replace(/\s?navi\-active/i, "");
if (!this.ul) return;
this.ul.style.display = "";
}
}
}
</script>
</head>
<body bgcolor="#CCCCCC" onLoad="init_navi('navi')">
<div class="menu">
<ul id="navi">
<li><a href="#">Home</a>
<ul>
<li class="menu1"><a href="Home_dt.php">Start</a></li>
<li class="menu1"><a href="index.htm">Intro</a></li>
<li class="menu1"><a href="GB/Home_gb.php">Englisch</a></li>
</ul>
</li>
<li><a href="#">Produktinformation</a>
<ul>
<li class="menu2"><a href="Info/kraeftig.htm">kräftig und kraftsparend</a></li>
<li class="menu2"><a href="Info/leise.htm">funktional und leise</a></li>
<li class="menu2"><a href="Info/hygienisch.htm">zeitsparend und hygienisch</a></li>
<li class="menu2"><a href="Info/ueberzeugend.htm">überzeugend</a></li>
<li class="menu2"><a href="Info/Qualitaet.htm">garantierte Qualität</a></li>
<li class="menu2"><a href="Info/intelligenz.htm">Vorsprung durch Intelligenz</a></li>
<li class="menu2"><a href="Info/innovativ.htm">innovativ und fortschrittlich</a></li>
<li class="menu2"><a href="Info/passend.htm">passend für jedes Gebäude</a></li>
<li class="menu2"><a href="Info/Highlights.htm">Highlights</a></li>
</ul>
</li>
<li><a href="#">Poduktkatalog</a>
<ul>
<li class="menu3"><a href="Katalog/Staubsauger.htm">Zentralstaubsauger und Zubehör</a></li>
<li class="menu3"><a href="Katalog/Komplettsystem.htm">Komplettsysteme</a></li>
<li class="menu3"><a href="Katalog/Reinigung.htm">Reinigungs-Sortimente</a></li>
<li class="menu3"><a href="Katalog/Saugschlaeuche.htm">Saugschläuche und Zubehör</a></li>
<li class="menu3"><a href="Katalog/Pakete.htm">Installations-Pakete</a></li>
<li class="menu3"><a href="Katalog/Steckdosen.htm">Saugsteckdosen und Zubehör</a></li>
<li class="menu3"><a href="Katalog/Kehrschaufel.htm">Kehrschaufel und Zubehör</a></li>
<li class="menu3"><a href="Katalog/Rohrsystem.htm">Klebe-Rohrsystem 2 Zoll ø 50,8 mm</a></li>
<li class="menu3"><a href="Katalog/Saugduesen.htm">Saugdüsen und Zubehör</a></li>
<li class="menu3"><a href="Katalog/Inst-Zubehoer.htm">Installationszubehör</a></li>
<li class="menu3"><a href="Katalog/Brandschutz.htm">Brandschutz</a></li>
<li class="menu3"><a href="Katalog/Einbau.htm">Einbaudetails</a></li>
<li class="menu3"><a href="Katalog/Grossanlagen.htm">Grossanlagen</a></li>
<li class="menu3"><a href="http://www.easy-line.de/" target="_blank">Easyline Wäscheabwurf</a></li>
</ul>
</li>
<li><a href="#">Service</a>
<ul>
<li class="menu4"><a href="Service/Wir.htm">Wir stellen uns vor</a></li>
<li class="menu4"><a href="Service/Weg.htm">Wegbeschreibung</a></li>
<li class="menu4"><a href="Service/Vertreter.htm">Vertreter vor Ort</a></li>
<li class="menu4"><a href="Service/Download.htm">Download</a></li>
<li class="menu4"><a href="Service/serv-form.htm">Service-Formular</a></li>
<li class="menu4"><a href="Service/Haendler/index.php">Händlerzugang</a></li>
</ul>
</li>
<li><a href="#">Kontakt</a>
<ul>
<li class="menu5"><a href="Kontakt/Adresse.htm">Unsere Adresse</a></li>
<li class="menu5"><a href="Kontakt/Kontaktformular.htm">Kontaktformular</a></li>
</ul>
</li>
<li><a href="Impressum.htm">Impressum</a></li>
<li><a href="Sitemap.htm">Sitemap</a></li>
</ul>
</div>
</body>
</html>
Vielen Dank für Eure Hilfe