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:
Und hier die html:
Da vor allem in der html sicher Fehler drinnen sind, wäre ich froh über Hinweise
Danke schon mal
LG
*R
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