Klappmenü = Fehler?

eisman

eisman

Aktives Mitglied
Thread Starter
Dabei seit
22.01.2005
Beiträge
2.056
Reaktionspunkte
105
hallo zusammen,
vieleicht kann mir einer helfen. Ich finde den Fehler nicht,woran es
liegt, das an den zb Menü_oberpunkt 4 der Rollover hinhaut,
während dessen bei den anderen Menü_oberpunkte 1-3 nicht funktioniert.
HTML: 
<title>hk photografie</title>
<script type="text/javascript">
<!--
window.onload=zeigen;
function zeigen(id) {
	for (var i = 1; i<=5; i++) {
		if (document.getElementById("submenue"+i)) {document.getElementById("submenue"+i).style.display="none";}
	}
if (document.getElementById(id)) {document.getElementById(id).style.display="block";}
}
//-->
</script>
<style type="text/css">

body 
{
    background-image: url(navi.gif);
	margin-left: 0%;
	margin-top: 10%;
	font-size:	 12px;
	font-weight: lighter;
	font-weight: normal;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
ul, li { margin:0; padding:0; list-style-type:none; }
ul#menue { width:140px; }
ul#menue li a 
{
    margin: 		-1px;
	height: 		25px;
	line-height: 	25px;
	text-align: 	center;
	border: 		1px solid #cccccc;
	background: 	#6e8b82;
	display:		block;
	color:			#cccccc;
	text-decoration:none;
}
ul#menue li a + ul.submenue{ display: none; }
ul#menue li a:focus + ul.submenue { display: block;}
ul#submenue1 li a, ul#submenue2 li a, ul#submenue3 li a, ul#submenue4 li a:hover{ background: #6e8b82; /* IE */ }
ul#submenue1 li a, ul#submenue2 li a, ul#submenue3 li a, ul#submenue4 li a{ background: #506660 /* IE */ }
</style>

</head>

<body>
<ul id="menue">
	<li><a href="#" onclick="javascript:zeigen('submenue1')">Oberpunkt 01</a>
		<ul id="submenue1" class="submenue">
			<li><a href="#">Untermenü 1.a</a></li>
			<li><a href="#">Untermenü 1.b</a></li>
			<li><a href="#">Untermenü 1.c</a></li>
			<li><a href="#">Untermenü 1.d</a></li>
		</ul>
  </li>	
			
	<li><a href="#" onclick="javascript:zeigen('submenue2')">Oberpunkt 02</a>
		<ul id="submenue2" class="submenue">
			<li><a href="#">Unterpunkt 2.a</a></li>
			<li><a href="#">Unterpunkt 2.b</a></li>
			<li><a href="#">Unterpunkt 2.c</a></li>
		</ul>
	</li>	

	<li><a href="#" onclick="javascript:zeigen('submenue3')">Oberpunkt 03</a>
		<ul id="submenue3" class="submenue">
			<li><a href="#">Unterpunkt 3.a</a></li>
			<li><a href="#">Unterpunkt 3.b</a></li>
			<li><a href="#">Unterpunkt 3.c</a></li>
			<li><a href="#">Unterpunkt 3.d</a></li>
		</ul>
	</li>

  <li><a href="#" onclick="javascript:zeigen('submenue4')">Oberpunkt 04</a>
		<ul id="submenue4" class="submenue">
			<li><a href="#">Unterpunkt 4.a</a></li>
			<li><a href="#">Unterpunkt 4.b</a></li>
			<li><a href="#">Unterpunkt 4.c</a></li>
		</ul>
  </li>
</ul>
</body>

</html>

ich danke euch für die Fehlersuche

eisman
 
Frag mich nicht warum, aber so gehts:

HTML: 
<title>hk photografie</title>
<script type="text/javascript">
<!--
window.onload=zeigen;
function zeigen(id) {
	for (var i = 1; i<=5; i++) {
		if (document.getElementById("submenue"+i)) {document.getElementById("submenue"+i).style.display="none";}
	}
if (document.getElementById(id)) {document.getElementById(id).style.display="block";}
}
//-->
</script>
<style type="text/css">

body 
{
    background-image: url(navi.gif);
	margin-left: 0%;
	margin-top: 10%;
	font-size:	 12px;
	font-weight: lighter;
	font-weight: normal;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}
ul, li { margin:0; padding:0; list-style-type:none; }
ul#menue { width:140px; }
ul#menue li a 
{
    margin: 		-1px;
	height: 		25px;
	line-height: 	25px;
	text-align: 	center;
	border: 		1px solid #cccccc;
	background: 	#6e8b82;
	display:		block;
	color:			#cccccc;
	text-decoration:none;
}
ul#menue li a + ul.submenue{ display: none; }
ul#menue li a:focus + ul.submenue { display: block;}
ul#submenue1 li a:hover{ background: #6e8b82; /* IE */ }
ul#submenue1 li a{ background: #506660 /* IE */ }
ul#submenue2 li a:hover{ background: #6e8b82; /* IE */ }
ul#submenue2 li a{ background: #506660 /* IE */ }
ul#submenue3 li a:hover{ background: #6e8b82; /* IE */ }
ul#submenue3 li a{ background: #506660 /* IE */ }
ul#submenue4 li a:hover{ background: #6e8b82; /* IE */ }
ul#submenue4 li a{ background: #506660 /* IE */ }
</style>

</head>

<body>
<ul id="menue">
	<li><a href="#" onclick="javascript:zeigen('submenue1')">Oberpunkt 01</a>
		<ul id="submenue1" class="submenue">
			<li><a href="#">Untermenü 1.a</a></li>
			<li><a href="#">Untermenü 1.b</a></li>
			<li><a href="#">Untermenü 1.c</a></li>
			<li><a href="#">Untermenü 1.d</a></li>
		</ul>
  </li>	
			
	<li><a href="#" onclick="javascript:zeigen('submenue2')">Oberpunkt 02</a>
		<ul id="submenue2" class="submenue">
			<li><a href="#">Unterpunkt 2.a</a></li>
			<li><a href="#">Unterpunkt 2.b</a></li>
			<li><a href="#">Unterpunkt 2.c</a></li>
		</ul>
	</li>	

	<li><a href="#" onclick="javascript:zeigen('submenue3')">Oberpunkt 03</a>
		<ul id="submenue3" class="submenue">
			<li><a href="#">Unterpunkt 3.a</a></li>
			<li><a href="#">Unterpunkt 3.b</a></li>
			<li><a href="#">Unterpunkt 3.c</a></li>
			<li><a href="#">Unterpunkt 3.d</a></li>
		</ul>
	</li>

  <li><a href="#" onclick="javascript:zeigen('submenue4')">Oberpunkt 04</a>
		<ul id="submenue4" class="submenue">
			<li><a href="#">Unterpunkt 4.a</a></li>
			<li><a href="#">Unterpunkt 4.b</a></li>
			<li><a href="#">Unterpunkt 4.c</a></li>
		</ul>
  </li>
</ul>
</body>

</html>

Ich bin in CSS noch nicht allzu firm, irgendwie scheint aber bei Deiner Auflistung, was von dem Rollover betroffen werden soll (ul#submenue1 ul#submenue2...), nur das letzte in der Liste anzukommen... Syntaxfehler?
 
Ja im css fehlen ein paar ;
 
@ThaHammer
was fehlt da??

eisman
edith: alles klaro, ich danke euch

eisman
 
habe aber noch ein kleines Problem,
die Links sind immer mit mit einem Rahmen versehen,nun
ist meine Frage: wie bekomme ich den Border so das
nur jeweils oben und unten die Rahmenfarbe zu sehen ist.
{
margin: -1px;
height: 25px;
line-height: 25px;
text-align: center;
border: 1px solid #cccccc;
background: #6e8b82;
display: block;
color: #cccccc;
text-decoration:none;
}

eisman
 
border-top-style: solid;
border-top-color: #cccccc;
border-bottom-style: solid;
border-bottom-color: #cccccc;
 
{
margin: -1px;
height: 25px;
line-height: 25px;
text-align: center;
border:1pt solid #cccccc;
border-left-color:#00ff00;
border-right-color:#00ff00;
border-width: thin;
background: #6e8b82;
display: block;
color: #cccccc;
text-decoration:none;
}
@Ziegler
brauchte nur etwas länger zu recherieren, und man bekommt
es bei CSS4you vor die Nase gesetzt.
Brauchte nur die rechte und Linke Randlinienen farblich verändern

Trotzdem Danke

eisman
 
Code: 
}
ul#menue li a + ul.submenue{ display: none; }
ul#menue li a:focus + ul.submenue { display: block;}
ul#submenue1 li a:hover{ background: #6e8b82; /* IE */ }
ul#submenue1 li a{ background: #506660 /* IE */ }
ul#submenue2 li a:hover{ background: #6e8b82; /* IE */ }
ul#submenue2 li a{ background: #506660 /* IE */ }
ul#submenue3 li a:hover{ background: #6e8b82; /* IE */ }
ul#submenue3 li a{ background: #506660 /* IE */ }
ul#submenue4 li a:hover{ background: #6e8b82; /* IE */ }
ul#submenue4 li a{ background: #506660 /* IE */ }
</style>

hier:
ul#submenue1 li a{ background: #506660 /* IE */ }
ul#submenue2 li a{ background: #506660 /* IE */ }
ul#submenue3 li a{ background: #506660 /* IE */ }
ul#submenue4 li a{ background: #506660 /* IE */ }

zum Beispiel!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten