Probleme: 2-stufige CSS / JS Navigation

jilli · 27. Okt. 2009

Hallo,

das eine Problem hat sich geklärt - jetzt habe ich Fragen zu meiner zweistufigen Navigation.

Aussehen soll sie wie in der PS-Grafik im Anhang.

zur Navigation

Die 1.Ebene + Hover klappt. Beim klick auf "Unser Team" öffnet sich die 2. Ebene. Die 1. Ebene z.B. "Unser Team" soll weiterhin eine graue Border unten haben.

Die 2.Ebene:
- der erste Eintrag soll oben einen größeren Abstand zur 1. Ebene haben
- eingerückt sein.

Irgendetwas habe ich total falsch gemacht, finde aber den Fehler nicht.

navigation.css

Code:

#menu {list-style-type:none; padding:0; margin:0; width:220px; position:absolute; top:100px; left:0; border-width:0 1px 1px; z-index:100;}
#menu ul {list-style-type:none; padding:0; margin:0; width:220px;}
#menu li.sub
	{
	float:left;
	background:#bde0f4;
	position:relative;
	border-bottom:1px solid #8b8c91;
	text-transform: uppercase;
	font-size:12px;
	line-height: 20px;
	padding: 14px 0 2px 0;
	text-indent:30px;}
	

#menu li, #menu li a 
	{
	display:block;
	color:#8b8c91;
	background:#bde0f4;
	font-family:arial, sans-serif;
	font-size:11px;
	font-weight:bold;
	text-transform: none;	
	width:220px;
	text-decoration:none;
	cursor:pointer;
	}

#menu ul,
#menu li.click ul ul,
#menu li.click ul li.hover ul ul {display:none;}

/*       hover erste ebene */
#menu li.hover {color:#8b8c91; background:#d5ecfa; z-index:500;}

/*       click erste ebene */
#menu li.click 
	{
	color:#8b8c91;
	background:#d5ecfa;
	}

#menu li.click ul 
	{
	display:block;
	font-family:arial, sans-serif;
	font-size:11px;
	font-weight:bold;
	}
	
#menu li.click ul li.hover ul, 
#menu li.click ul li.hover ul li.hover ul
	{
	display:block;
	font-family:arial, sans-serif;
	font-size:11px;
	font-weight:bold;
	text-transform: none;
	position:absolute;
	left:150px;
	top:-1px;
	}

#menu li.click ul li.hover {background:#d5ecfa; font-family:arial, sans-serif; font-size:10px; font-weight:bold;}

HTML Navigation

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> </title>

<link rel="stylesheet" media="all" type="text/css" href="navigation.css" />
<script src="click_hover.js" type="text/javascript"></script>
</head>

<body onload="clickMenu('menu')">

<ul id="menu">
<!-- Philosophie -->
	<li class="sub">Philosophie
		<ul>
			<li><a href="">1</a></li>
			<li><a href="">2</a></li>
		</ul>
	</li>
	
	<li class="sub">Unser Haus
		<ul>
			<li><a href="http://www.is-kandemir.de" target="_blank">ISK</a></li>
			<li><a href="#">2</a></li>
		</ul>
	</li>
	
	<!-- Team -->
	<li class="sub">Unser Team
		<ul>
			<li><a href="">Langzeitpflege</a></li>
			<li><a href="">Kurzzeitpflege</a></li>
		</ul>
	</li>
		

	
	
</ul>





</body>
</html>

Probleme: 2-stufige CSS / JS Navigation

jilli

New member

Anhänge