Navi - Problem

Hallo,
ich versuche und versuche schon insgesamt 2 stunden code miteinander zu verbinden. Schaffe es einfach nicht und es wird immer schlimmen ...

Ich habe folgenden code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<title>
</title>
	<style type="text/css">
		#navcontainer
		{
			margin-left: 30px; /* just to move list away from edge of page on Listamatic */
			width: 12em;
			border-right: 1px solid #000;
			padding: 0px;
			margin-bottom: 1em;
			font-family: Verdana, Lucida, Geneva, Helvetica, Arial, sans-serif;
			background-color: #90bade;
			color: #333;
		}

		#navcontainer ul
		{
			list-style: none;
			margin: 0px;
			padding: 0px;
			border: none;
		}

		#navcontainer li
		{
			border-bottom: 1px solid #90bade;
			margin: 0;
		}

		#navcontainer li a
		{
			display: block;
			padding: 6px .5em 6px .5em;
			border-left: .7em solid #1958b7;
			border-right: .7em solid #508fc4;
			background-color: #2175bc;
			color: #fff;
			text-decoration: none;
			width: 9.6em;
		}

		#navcontainer li a:hover
		{
			border-left-color: #1c64d1;
			border-right-color: #5ba3e0;
			background-color: #2586d7;
			color: #fff;
		}

		#navcontainer li li
		{
			border-top: 1px solid #90bade;
			border-bottom: 0;
			margin: 0;
		}

		#navcontainer li li a
		{
			padding: 4px .5em 4px 1.3em;
			background-color: #5ba3e0;
			width: 8.8em;
		}

		#navcontainer li li li a
		{
			padding: 3px .5em 3px 1.9em;
			background-color: #73b2e8;
			width: 8.2em;
		}
</style>
</head>

<body>
<div id="navcontainer">
	<ul id="navlist">
		<li id="active"><a href="#" id="current">Item one</a>
		<ul id="subnavlist">
			<li id="subactive"><a href="#" id="subcurrent">Subitem one</a></li>
			<li><a href="#">Subitem two</a></li>

			<li><a href="#">Subitem three</a></li>

			<li><a href="#">Subitem four</a></li>
		</ul></li>
		<li><a href="#">Item two</a></li>
		<li><a href="#">Item three</a></li>
		<li><a href="#">Item four</a></li>

	</ul>

</div>

</div>
</body>
</html>

Und versuche das mit dieser Technik zu verbinden:
http://tutorials.alsacreations.com/deroulant/menu-vertical.htm#

Sprich, dass die ganzen Subitem so "aufklappen" wie auf der seite.
Kann mir da wer unter die Arme greifen? Ich mein am verzweifeln

Die Person die mir helfen kann, hat den größten danke verdient

Ach, und ich hoffe, ihr hattet alle ein guten rutsch

Da ist das mit Javascript gemacht.

minhen

Mit Mausklick kannst du das nicht mit reinem CSS machen. Was du jedoch ziemlich einfach mit CSS machen kannst, ist, dass das Menü aufklappt, wenn man mit der Maus drüber fährt:

ul li ul { display: none }
	ul li:hover ul { display: block }

Solltest übrigens nicht so mit IDs um dich hauen. Der IE6 unterstützt :hover nur bei Links. Der IE7 dagegen hat damit - wie alle anderen Browser - keine Probleme.

Danke minhen,
das ist auch perfekt.

1000 Dank

eine frage habe ich aber noch
Ist es nicht möglich den JavaScript code mit dem css code zuverbinden? Also meiner meinung nach nein, aber vielleicht kenn ich es auch einfach nicht .... ?!???

Man kann css nicht mit javaScript verbinden!

Es ist schon5 Uhr. Ich habe es immer noch nicht geschaft die navi an js code anzupassen.

Die ganzen veriablen müssten ja verändert werden (im code) und ausserdem sind die aufbauten gnaz anders. Das übersteigt einfach mein können. Kann mir da wer helfen?

Naja, ich bin total müde .... n8

minhen

Kamxat schrieb:

Ist es nicht möglich den JavaScript code mit dem css code zuverbinden?

Selbstverständlich, das ist überhaupt kein Problem. Genau so funktioniert doch auch der Code der Seite, die du im ersten Beitrag verlinkt hast.
Lies dir dazu am besten den hier durch:
http://de.selfhtml.org/javascript/objekte/style.htm