nicht angemeldet
Hallo Andre,
vielen Dank für dein posting.
Ich hab das ganze mal zusammengebastelt auf meine Bedürfnisse.
Leider ist es aber nicht so wie ich das haben will, bzw. ich kriegs einfach nicht korrekt hin.
Ich möchte gerne, dass sich im Untermenü die Hintergrundfarbe ändert, bzw. das es eine andere ist, wie im Hauptmenü. Wie kann ich das machen.
Hier mal der Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Dynamisch Navigationsleisten einblenden</title>
<style type="text/css">
html,body {
width:100%;
height:100%;
margin:0;
padding:0;
overflow:hidden;
}
body {
background-color:#666666;
}
#box {
width:760px;
height:100%;
background-color:#cccccc;
float:left;
border:1px solid black;
}
ul#Navigation {
margin: 0; padding: 0;
text-align: center;
font: 10px/20px "Lucida Grande", verdana, sans-serif;
}
ul#Navigation li {
list-style: none;
float: left; /* ohne width - nach CSS 2.1 erlaubt */
position: relative;
margin:1px;
padding: 0;
}
* html ul#Navigation li { /* Korrektur fuer den IE */
margin-bottom: 0px;
}
ul#Navigation li ul {
margin: 0; padding: 0;
margin-left:2px;
position: absolute;
top: 21px; left: 0px;
display: none; /* Unternavigation ausblenden */
background-color:black;
}
* html ul#Navigation li ul { /* Korrektur fuer IE 5.x */
left: -1.5em;
lef\t: -0.4em;
}
ul#Navigation li:hover ul {
display: block; /* Unternavigation in modernen Browsern einblenden */
}
ul#Navigation li ul li {
float: none;
display: block;
}
ul#Navigation a, ul#Navigation span {
display: block;
width: 70px; /* Breite den in li enthaltenen Elementen zuweisen */
text-decoration: none; font-weight: normal;
background-color:black; text-align: center;
color: #ffffff;
border-top: 1px solid #A8B090;
border-bottom: 1px solid #A8B090;
border-left: 1px solid #A8B090;
}
* html ul#Navigation a, * html ul#Navigation span {
width: 70px; /* Breite nach altem MS-Boxmodell für IE 5.x */
w\idth: 6.4em; /* korrekte Breite fuer den IE 6 im standardkompatiblen Modus */
}
ul#Navigation a:hover, ul#Navigation span, li a#aktuell {
color:black;
background-color:black;
}
li a#aktuell { /* aktuelle Rubrik kennzeichnen */
color: #ffffff;
background-color:black;
}
ul#Navigation li ul span { /* aktuelle Unterseite kennzeichnen */
border-color: none;
}
</style>
<!--[if IE]><script type="text/javascript">
function hoverIE() {
var LI = document.getElementById("Navigation").firstChild;
do {
if(LI.firstChild) { // A (SPAN)
if(LI.firstChild.nextSibling) { // #text
if(LI.firstChild.nextSibling.nextSibling) { // UL ?
LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
}
}
}
LI = LI.nextSibling;
}
while(LI);
}
function einblenden() {
this.firstChild.nextSibling.nextSibling.style.display = "block";
this.firstChild.nextSibling.nextSibling.style.backgroundColor = "blue";
}
function ausblenden() {
this.firstChild.nextSibling.nextSibling.style.display = "none";
}
window.onload=hoverIE;
</script><![endif]-->
</head>
<body>
<div id="box">
<ul id="Navigation">
<li><a href="#Beispiel">Seite 2</a>
<ul>
<li><a href="#Beispiel">Seite 2a</a></li>
<li><a href="#Beispiel">Seite 2b</a></li>
</ul>
</li>
</ul>
<div>
</body>
</html>
Gruss
Thomas