nicht angemeldet
Hallo Zusammen,
nach langem ausprobieren und testen bin ich mit meinem Latein leider am Ende und komme nicht mehr weiter... ich hoffe das ihr mir vielleicht weiterhelfen könnt.
Ich habe ein CSS Menü was auch soweit prima funktioniert. Nun möchte ich dieses Menü gerne mehrmals auf einer Seite haben und genau daran scheitere ich. Das "Ausklappen" und der "Hover-Effekt" funktionieren bei dem zweiten Menü nicht mehr und ich verstehe nicht warum. Wahrscheinlich ist die Lösung ganz simpel und ich sehe einfach den "Wald vor lauter Bäumen" nicht.
Naja, schon mal vielen Dank
Nadine
Hier der Code:
<head>
<script type="text/javascript">
function IEHoverPseudo() {
var navItems = document.getElementById("navigation").getElementsByTagName("li");
for (var i=0; i<navItems.length; i++) {
if(navItems[i].className == "parent") {
navItems[i].onmouseover=function() { this.className += " over"; }
navItems[i].onmouseout=function() { this.className = "parent"; }
}
}
}
window.onload = IEHoverPseudo;
</script>
<style type="text/css">
/* Beginn Navigation*/
ul#navigation,
ul#navigation ul {
margin: 0;
padding: 0;
width: 160px; /* Breite des Menüs */
border-bottom: 1px solid #ccc;
background: #EFF4FA; /* IE6 Bug */
font-size: 100%;
z-index: 5;
}
ul#navigation li {
position: relative;
list-style: none;
}
ul#navigation li a {
display: block;
text-decoration: none;
color: #000000;
padding: 3px;
border: 1px solid #ccc;
border-bottom: 0;
z-index: 5;
}
/* Fix IE. Hide from IE Mac \*/
* html ul#navigation li { float: left; height: 1%; }
* html ul#navigation li a { height: 1%; }
/* End */
ul#navigation ul {
position: absolute;
display: none;
left: 159px; /* immer 1px kleiner als die angegebene breite des Menüs */
top: 0;
z-index: 5;
}
ul#navigation li ul li a { padding: 2px 5px; }
ul#navigation li:hover ul ul,
ul#navigation li:hover ul ul ul,
ul#navigation li.over ul ul,
ul#navigation li.over ul ul ul { display: none; }
ul#navigation li:hover ul,
ul#navigation li li:hover ul,
ul#navigation li li li:hover ul,
ul#navigation li.over ul,
ul#navigation li li.over ul,
ul#navigation li li li.over ul { display: block; } /* The magic */
ul#navigation li.parent { background: transparent url(grafik/pfeil.gif) right center no-repeat; }
ul#pnavigation li.parent:hover,
ul#navigation li.over { background-color: #C4D4EA; }
ul#navigation li a:hover { color: #5F8AC5; }
/* Ende Navigation*/
</style>
</head>
<body>
<div style="position:absolute; top:165px; left: 10px; width: 160px;">
<ul id="navigation">
<li class="parent"><a href="#">Unternehmen</a>
<ul>
<li><a href="#">Profil</a></li>
<li><a href="#">Lösungsmodell</a></li>
<li><a href="#">Kennzahlen</a></li>
<li><a href="#">Team</a></li>
</ul>
</li>
<li><a href="#">Geschäftsfelder</a></li>
<li class="parent"><a href="#">Referenzen</a>
<ul>
<li><a href="#">Unternavi 1.1</a></li>
<li><a href="#">Unternavi 1.2</a></li>
<li><a href="#">Unternavi 1.3</a></li>
</ul>
</li>
<li class="parent"><a href="#">Workshop</a>
<ul>
<li><a href="#">Unternavi 2.1</a></li>
<li><a href="#">Unternavi 2.2</a></li>
<li class="parent"><a href="#">Unternavi 2.3</a>
<ul>
<li><a href="#">Unternavi 2.3.1</a></li>
<li><a href="#">Unternavi 2.3.2</a></li>
<li><a href="#">Unternavi 2.3.3</a></li>
<li><a href="#">Unternavi 2.3.4</a></li>
</ul>
</li>
<li><a href="#">Unternavi 2.4</a></li>
<li><a href="#">Unternavi 2.5</a></li>
</ul>
</li>
<li><a href="#">eXtreme</a>
<ul>
<li><a href="#">Unternavi 3.1</a></li>
<li><a href="#">Unternavi 3.2</a></li>
<li><a href="#">Unternavi 3.3</a></li>
<li><a href="#">Unternavi 3.4</a></li>
</ul>
</li>
</ul>
</div>
<div style="position:absolute; top:365px; left: 10px; width: 160px;">
<ul id="navigation">
<li class="parent"><a href="#">Menü 2</a>
<ul>
<li><a href="#">Unternavi 2.1</a></li>
<li><a href="#">Unternavi 2.2</a></li>
</ul>
</li>
<li><a href="#">Menü 3</a></li>
<li class="parent"><a href="#">Menü 4</a>
<ul>
<li><a href="#">Unternavi 4.1</a></li>
<li class="parent"><a href="#">Unternavi 4.1</a>
<ul>
<li><a href="#">Unternavi 4.1.1</a></li>
<li><a href="#">Unternavi 4.1.2</a></li>
<li><a href="#">Unternavi 4.1.3</a></li>
<li><a href="#">Unternavi 2.3.4</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</body>