Flyout Navigation - mit current-status ?

rizzoo

Grünschnabel
Hallo Liebes Forum,

also ich bin nicht der absolute Crack mit CSS, aber meistens bekomme ich es irgendwie hin!

Aber nun, weiß ich nicht weiter:
Ich habe mir ein FLYOUT-Navigations-Menu gebaut (mit großer Hilfe hier ausm Forum und über andre Seiten).
Nun habe ich den Links/Seiten, auf der der User sich befindet, ist mit der ID=Currenrt verpasst. Sie werden nun auch farblich anders dargstellt. Allerdings schaffe ich es nicht, dass das FLYOUT-MENU auch sichtbar bleibt (ohne dass man mit der Maus drüber hovert).

Ich bekomms leider nicht hin, und dachte vielleicht kann mir hier jemand helfen :)

Also hier mal CSS:
Code:
#container {
	width:695px;
	padding:0px;
}
#menu {
	font-family: "News Gothic MT", Helvetica, Arial, sans-serif;
	width:120px;
	position:relative;
	margin:0;
	font-size:10px;
}
#menu ul li a, 
#menu ul li a:visited {
	display:block;
	text-decoration:none;
	color:#000;
	width:120px;
	border-width:0px 0px 1px 0;
	background:#fff;
	font-size:10px;
	padding-left:10px;
	height: 15px;
	line-height: 15px;
}
#menu ul {
	padding:0; 
	margin:0;
	list-style-type: none;
}
#menu ul li {
	float:left;
	position:relative;
	border-bottom: solid #000 thin;
}
#menu ul li ul {display: none;}

#menu table {border-collapse:collapse; border:0; margin:0; padding:0;}
 
#menu ul li:hover a,
#menu ul li a:hover {
	color:#000000;
	border-bottom: solid #000 thin;
}

#menu ul li:hover ul,
#menu ul li a:hover ul {display:block; position:absolute; top:0; left:130px; width:565px; background: transparent;}

#menu ul li:hover ul li,
#menu ul li a:hover ul li {float:left;}

#menu ul li:hover ul li a,
#menu ul li a:hover ul li a {display:block; color:#999999; width:130px; float:left;}

#menu ul li:hover ul li a.sub,
#menu ul li a:hover ul li a.sub {color:#000;}

#menu ul li:hover ul li a:hover,
#menu ul li a:hover ul li a:hover {color:#000;}

#menu ul li:hover ul li ul,
#menu ul li a:hover ul li a ul {visibility:hidden; position:absolute; width:200px;}

#menu ul li:hover ul li:hover ul,
#menu ul li a:hover ul li a:hover ul {visibility:visible; left:-1px; top:31px; color:#000;}

#menu ul li:hover ul li:hover ul li a,
#menu ul li a:hover ul li a:hover ul li a {display:block; width:200px; color:#000; border-left:1px solid #eee;}

#menu ul li:hover ul li:hover ul li a:hover,
#menu ul li a:hover ul li a:hover ul li a:hover {background:#bd8d5e; color:#fff;}

#menu ul li a#current, 
#menu ul li a#current:link,
#menu ul li ul a#current,
#menu ul li ul a#current:link
{
	color: #000000;
	cursor: default;
	font-weight: bold;
	border-bottom: 1px solid #000;
	visibility:visible;
	display:block
}

#menu ul li a#current:hover
{
	border-bottom: 1px solid #000;
	color: #000000;
}

Und hier die html:

Code:
<div id="navcontainer">
      		<div id="menu"><ul>
			<li id="active"><a href="vita.html" title="VITA" id="current">V I T A<!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
		<li><a href="vita_basics.html" title="BASICS">B A S I C S</a></li>
		<li id="active"><a href="vita_theater.html" title="THEATER" id="current">T H E A T E R</a></li>
		<li><a href="vita_film.html" title="FILM">F I L M</a></li>
		<li><a href="vita_sprache.html" title="AUDIO">S P R A C H E</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="demo.html">D E M O S
	  <!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
		<li><a href="demo_film.html" title="FILM">F I L M</a></li>
		<li><a href="demo_audio.html" title="AUDIO">A U D I O</a></li>
		</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="photos.html">P H O T O S <!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
	<ul>
		<li><a href="photos_portrait.html" title="PORTRAITSPHOTOS">PORTRAITS</a></li>

		<li><a href="photos_theater.html" title="THEATERPHOTOS">THEATER</a></li>
	</ul>
	<!--[if lte IE 6]></td></tr></table></a><![endif]-->
	</li>
	<li><a href="kontakt.html">K O N T A K T <!--[if IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
	</ul>
</div>
   	</div>

Da vor allem in der html sicher Fehler drinnen sind, wäre ich froh über Hinweise :)

Danke schon mal

LG
*R
 
Zurück