Klappmenü

[bastlwastl]

Servus,

ich würde gerne die Navigation meiner Seite erweitern, so dass beim mouse over bestimmter Punkte rechts weitere Navigationspunkte zum Vorschein kommen.
Klappmenü nennt man das wohl, ich hab im Internet schon einige gesehen, möchte aber meine Navigation nicht ganz umbauen, sondern nur erweitern...
So sieht z. Bsp. die entsprechende Navigation in der .html aus:

<li><a class="hide" href="#">Touren 2007</a>
<ul>
<li><a href="../../2007/07zugspitz/07zugspitz.html">Zugspitzrunde</a></li>
<li><a href="../../2007/07ax01/07ax01.html">AX´07 Fimberpass</a></li>
<li><a href="../../2007/07ax02/07ax02.html">AX´07 Val Uina</a></li>
<li><a href="../../2007/07ax03/07ax03.html">AX´07 Madritschjoch</a></li>
<li><a href="../../2007/07ax04/07ax04.html">AX´07 Rabbi Joch</a></li>
<li><a href="../../2007/07ax05/07ax05.html">AX´07 Passo Bregna</a></li>
<li><a href="../../2007/07axinfos/07axinfos.html">AX´07 Infos</a></li>
<li><a href="../../2007/07kampenwand/07kampenwand.html">Kampenwand</a></li>
</ul>
</li>

Ich bin bis jetzt soweit gekommen, dass der obere Code erweitert werden muss, etwa so:

<li><a class="hide" href="#">Touren 2007</a>
<ul>
<li><a href="../../2007/07zugspitz/07zugspitz.html">Zugspitzrunde</a></li>
<li><a href="../../2007/07ax01/07ax01.html">AX´07 Fimberpass</a></li>
<li><a href="../../2007/07ax02/07ax02.html">AX´07 Val Uina</a></li>
<ul>
<li><a href="?????.html">??????</a></li>
</ul>
<li><a href="../../2007/07ax03/07ax03.html">AX´07 Madritschjoch</a></li>
<li><a href="../../2007/07ax04/07ax04.html">AX´07 Rabbi Joch</a></li>
<li><a href="../../2007/07ax05/07ax05.html">AX´07 Passo Bregna</a></li>
<li><a href="../../2007/07axinfos/07axinfos.html">AX´07 Infos</a></li>
<li><a href="../../2007/07kampenwand/07kampenwand.html">Kampenwand</a></li>
</ul>
</li>

Funktioniert so aber nicht, da ist wohl an der .css Datei auch noch was zu ändern/zuzufügen?
Die .css sieht so aus:

body {
	background-color: #FFFFFF;
	padding:0px;
	background-repeat:no-repeat;
	background-attachment: fixed;
	background-position: left;
	background-image: url(../images/bg_full.jpg);
	left: 0px;
	background-position-x: 0;
	background-position-y: 0;
	visibility: visible;
	z-index: 1;
	top: 0px;
	height: 100px;
}

html>body 	{
	height:100%;
}	

#all	{
	width:956px;
	height:100%;
	padding: 0px;
	background-color: #a81e2d;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	border:1px solid #a81e2d
}
#mitte	{
	width:956px;
	background-color: #FFFFFF;
	text-align:justify;
	border-right:solid 1px #3f3f3f;
	border-left:solid 1px #3f3f3f;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}	
/* menue oben */

.menu {
	width:955px;
	height:22px;
	background-color:#A81E2D;
	position:relative;
	z-index:1;
	border-top-color: #FFFFFF;
	border-right-color: #FFFFFF;
	border-bottom-color: #FFFFFF;
	border-left-color: #FFFFFF;
}
.menu ul li a, .menu ul li a:visited {
	display:block;
	text-decoration:none;
	color:#FFFFFF;
	background-color:#a81e2d;
	font-family:verdana, sans-serif;
	font-size: 60%;
	font-variant:normal;
	overflow:hidden;
	border:solid 1px #000000;
	line-height:20px;
	text-align:center;
	width: 132px;
	margin-top: 0;
	margin-right: 1px;
	margin-bottom: 0;
	margin-left: 1px;
}
.menu ul {
	padding:0;
	list-style: none;
	width: 956px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
.menu ul li {
	float:left;
	position:relative;
}
.menu ul li ul {
	display: none;
}

/* specific to non IE browsers */
.menu ul li:hover a {
	background-color:#FFFFFF;
	color:#000000;
	text-decoration:none;
	border:solid 1px #ffffff;
}
.menu ul li:hover ul {
	display:block;
	position:absolute;
	top:20px;
	left:0;
	width: 105px;
	color: #FFFFFF;
}
.menu ul li:hover ul li a.hide {
	background:#6a3;
	color:#FFFFFF;
}
.menu ul li:hover ul li:hover a.hide {
	background:#6fc; 
	color:#000;
}
.menu ul li:hover ul li ul {
	display: none;
	color: #FFFFFF;
}
.menu ul li:hover ul li a {
	display:block;
	background:#a81e2d;
	color:#FFFFFF;
	border:solid 1px #000000;
	line-height:21px;
}
.menu ul li:hover ul li a:hover {
	background-color:#FFFFFF;
	color:#000000;
	text-decoration:none;
	border:solid 1px #7C7C7C;
}
/*
.menu2 a, .menu2 a:visited , .menu2 a:active {display: block;
color:#808080;
background-color:#000;
text-decoration:none ;font-family:verdana, sans-serif; font-size: 86%;
padding-left: 0px; padding-bottom: 0px; padding-top:0px;
margin-left: 1px;margin-right: 1px;
border:solid 1px #353535;
line-height:30px;
text-align:center;

background-image:url(images/ob.jpg);
}

.menu2 a:hover {background-color:#282828;color:#fff; text-decoration:none ;border:solid 1px #7C7C7C;

background-image:url(images/mover.jpg);
}
*/
#menu3	{
	width:100%;
	height:32px;
	background-color:black;
}	
#menu3 a, #menu3 a:visited , #menu3 a:active {
	float:left;
	display:block;
	width:154px;
	font-family:verdana, sans-serif; 
	font-size: 86%;
	padding-left: 0px; 
	padding-bottom: 0px; 
	padding-top:0px;
	margin: 0 1px;
	line-height:30px;
	text-align:center;
	text-decoration:none ;
	color:#808080;
	background-color:#000;
	border:solid 1px #353535;
	background-image:url(images/ob.jpg);
}
#menu3 a:hover {
	float:left;
	display:block;
	width:154px;
	font-family:verdana, sans-serif; 
	font-size: 86%;
	padding-left: 0px; 
	padding-bottom: 0px; 
	padding-top:0px;
	margin: 0 1px;
	line-height:30px;
	text-align:center;
	text-decoration:none ;
	background-color:#282828;
	color:#fff; 
	border:solid 1px #7C7C7C;
	background-image:url(images/mover.jpg);
}






h2	{
	padding:20px;
	color:#000000;
	margin-bottom:5px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 16px;
}


/* hauptgerüst */

#li {
	width:103px;
	height:1px;
/*	height:100%;
	background-image:url(images/rand1.jpg) ;
	background-repeat:repeat-y; 
	border-right:solid 1px #3f3f3f;border-left:solid 0px #000;*/
}


#re {
	width:103px;
	height:1px;
/*	height:100%;
	background-image:url(images/rand2.jpg);
	background-repeat:repeat-y; 
	border-left:solid 1px #3F3F3F;border-right:solid 0px #000;*/
}

#top {
	background-repeat:repeat-x;
	vertical-align:middle;
	text-align:center;
	height:120px;
	background-color:#A81E2D;
	border-bottom:solid 0px #535353;
	border-top:solid 0px #161616;
}

#leistetop {
	height:40px;
	width:956px;
	border-bottom:solid 1px #ffffff;
	border-top:solid 1px #000;
	background-repeat:repeat-x;
	background-image: url(../images/leistetop_background.jpg);
}
.leistetop	{
	line-height:40px;
	letter-spacing:10px;
	color:#FFFFFF;
	font-variant:normal;
	margin-left:10px;
	margin-bottom:1px;
	vertical-align:bottom;
	font-family: Arial, Helvetica, sans-serif;
}	
#leiste1 {
	background-color:#000;
	height:34px;
	letter-spacing:0px;
	color:#56686D;
	font-variant:small-caps;
	padding-left:0px;
	padding-bottom:0px;
	width:100%;
	vertical-align:middle;
	border-bottom:solid 1px #535353;
	border-top:solid 1px #000;
	border-bottom:solid 0px #ffffff;
	font-family: georgia,arial, helvetica, tahoma ,verdana,  sans-serif;
	text-align:center;
}
#leiste2 {height:0px;

background-color:#000;
height:34px;
letter-spacing:0px;
color:#56686D;
font-variant:small-caps;
padding-left:0px;
padding-bottom:0px;
width:100%;
vertical-align:middle;border-bottom:solid 1px #535353;
border-top:solid 1px #000;
border-bottom:solid 0px #000;
font-family: georgia,arial, helvetica, tahoma ,verdana,  sans-serif;
text-align:center;
}



#sp1 {color:#fff;font: normal 11px/15px verdana, sans-serif; padding-left: 0px;padding-right:0px;padding-top: 0px;
background-color:#0c0c0c;
border-right:solid 1px #313131;

}

#content {
	width:956px;
	padding: 5px 0;
	background-color:#E5E5E5;
	background-repeat:repeat-x;
}
.sp2	{
	display:block;
	color:#000000;
	letter-spacing:0px;
	font-size: 12px;
	line-height: 125%;
	font-family: Arial, Helvetica, sans-serif;
	font-style: normal;
	padding-left: 20px;
	padding-right: 20px;
}


#fussb {
	font: normal 11px verdana, sans-serif;
	color: #FFFFFF;
	line-height: 18px;
	height:18px;
	text-align:center;
	background-color:#a81e2d;
	width:100%;
	border-top:solid 1px #343434;
	background-repeat:repeat-x;

}
/* scrolleiste internet explorer ab vers.5.5 */




/* menue  */

#menu1 a , #menu1 a:visited , #menu1 a:active {display:block;
background-color:#0c0c0c;
color:#808080;
text-decoration:none ;
text-align:center;
width:200px;
font-size: 86%;line-height: 28px;
font-family: verdana,"Trebuchet MS",arial, helvetica, verdana, tahoma, sans-serif;
margin:0px;
border-top:solid 1px #0c0c0c;
border-bottom:solid 1px #000;

}

#menu1 a:hover{
background-color:#000;
color:#fff;
text-decoration:none ;
border-top:solid 1px #1f1f1f;
border-bottom:solid 1px #1F1F1F;}

/* allgemeine links im text */

a:link, a:visited, a:active{
	font-family: arial, helvetica, tahoma ,verdana,  sans-serif;
	line-height: 125%;
	text-decoration:underline;
	color:#000000;
}

a:hover{
	text-decoration:none;
	background-color:#FFFFFF;
	color:#000000;
}
.versteck {
	visibility: hidden;
	z-index: auto;
}

Wenn mir bitte einer hier aus dem Forum helfen könnte, das wäre sehr nett.
Danke.
Beste Grüße
bastwastl

[sejuma]

http://www.ohne-css.gehts-gar.net/0067.php

[bastlwastl]

Danke soweit...

Ok, ich muss die .css bearbeiten.
Dieser Code soll wohl das Aufklappen nach rechts bewirken:

#menu ul ul {
position: absolute;
top: 0;
left: 140px;
z-index: 2;
display: none;
}

Oder?
Wenn ich obigen Code zur .css hinzu füge, klappts nicht...

Leider finde ich in meiner .css kein #menu ul ul
Kann da bitte jemand weiter helfen?
Danke schon mal...

Bitte nicht zu sehr wundern, ich hab von der Bastelei nicht wirklich Ahnung.

[sejuma]

Du kannst natürlich nicht die Auszüge aus dieser Anleitung für deine Navi verwenden, wenn du im HTML-Teil andere Selektorenbezeichnungen hast. Da muss HTML und CSS schon korrespondieren.

PS: "Ahnung" kann man sich durch Lernen aneignen. Wenn das zu umständlich ist, kann man auch einen bereits funktionierenden Code verwenden.

[bastlwastl]

Vielen Dank für die umfassende Hilfe.