Ich habe mir eine Drop Line Subnavigation nach diesem Vorbild angepaßt:
>>klick<<Wenn ihr den Link verfolgt und die Navi testet seht ihr das die Navi bei jedem Link stehen bleibt.
Bei mir funktioniert das aber nicht.
Meine Navi:
>>klick<<Ich möchte z.B. wenn ich nun auf den Link Nationalmannschaft klicke das die Hintergrundfarbe von "Home" zur Hintergrundfarbe bei "Nationalmannschaft" wird und die Subnavigation von Nationalmannschaft sichtbar bleibt.
Kann mir da einer von euch Koryphäen eine Tipp geben das das so funktioniert.
Ich wäre euch sehr dankbar.
Html Code:
<div id="nav">
<ul class="current"><li><a href="./">Home
</a></li></ul><ul class="sub_active"><li class="current_sub"><a href="./">Startseite</a></li>
<li><a href="modules.php?name=Topics">News Archiv</a></li>
<li><a href="modules.php?name=Topics">Themen Archiv</a></li>
<!--<li><a href="">Malvern Hall</a></li>
<li><a href="">Home</a></li>
<li><a href="">Weymouth Bay</a></li>-->
</ul>
<ul class="select"><li><a href="modules.php?name=Content&pa=showpage&pid=1">J.League
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><a href="Content-Spieltage-2011-J-League-Division-1-item-42.html">Saison 2011 Division 1</a></li>
<li><a href="Content-Tabelle-2011-J-League-Division-1-item-44.html">Tabelle 2011 Division 1</a></li>
<li><a href="Content-Spieltage-2011-J-League-Division-2-item-43.html">Saison 2011 Division 2</a></li>
<li><a href="Content-Tabelle-2011-J-League-Division-2-item-45.html">Tabelle 2011 Division 2</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
<ul class="select"><li><a href="modules.php?name=Content2&pa=showpage&pid=1">Nationalmannschaft
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><a href="">Mäner</a></li>
<li><a href="">U22 Männer</a></li>
<li><a href="">Frauen</a></li>
<!--<li><a href="">The Yellow Dress</a></li>
<li><a href="">The Piano Lesson</a></li>-->
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
<ul class="select"><li><a href="Content-Emperor-s-Cup-Kaiserpokal-item3-1.html">Emperor's Cup
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><a href="">2011</a></li>
<!--<li><a href="">Onions and Bottles</a></li>
<li><a href="">Mardi Gras</a></li>
<li><a href="">Still Life</a></li>
<li><a href="">Boy in a Red Waistcoat</a></li>-->
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
<ul class="select"><li><a href="Content-FUJI-XEROX-Supercup-item4-1.html">FUJI XEROX Supercup
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><a href="Content-FUJI-XEROX-Supercup-item4-1.html">alle Finals</a></li>
<!--<li><a href="">Onions and Bottles</a></li>
<li><a href="">Mardi Gras</a></li>
<li><a href="">Still Life</a></li>
<li><a href="">Boy in a Red Waistcoat</a></li>-->
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
<ul class="select"><li><a href="Content-Yamazaki-Nabisco-Cup-item5-1.html">Yamazaki Nabisco Cup
<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]--><ul class="sub">
<li><a href="Content-Yamazaki-Nabisco-Cup-2011-item5-3.html">Saison 2011</a></li>
<li><a href="Content-Alle-Finalspiele-item5-2-page-1.html">alle Finals</a></li>
<!--<li><a href="">Mardi Gras</a></li>
<li><a href="">Still Life</a></li>
<li><a href="">Boy in a Red Waistcoat</a></li>-->
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li></ul>
</div>
CSS Code:
/* menu unterm header*/
#nav {
width:1024px;
height:80px;
background:#1D252F;
position:relative;
}
#nav .select, #nav .current {
margin:0;
padding:0;
list-style:none;
}
#nav li {
display:inline;
margin:0;
padding:0;
height:auto;
}
#nav .select a,
#nav .current a {
display:block;
height:40px;
float:left;
background:#1D252F;
padding:0 10px 0 10px;
text-decoration:none;
font-size:12px;
font-family: Verdana, Arial, Helvetica, sans-serif;
line-height:40px;
white-space:nowrap;
color:#fff;
}
* html #nav .select a, * html #nav .current a {width:1px; height:40px;}
#nav .select a:hover,
#nav .select li:hover a {background:#1D252F; cursor:pointer; color:#cc0000;}
#nav .sub {
display:none;
}
/* for IE5.5 and IE6 only */
#nav table {position:absolute; border-collapse:collapse; left:0; top:0;}
#nav .current a {background:#455870; color:#ffffff;}
#nav .sub li a:hover,
#nav .select a:hover .sub li a:hover,
#nav .select li:hover .sub li a:hover {background:#1D252F; color:#cc0000;}
#nav .sub_active .current_sub a,
#nav .sub_active a:hover {
background:#1D252F;
color:#cc0000;
}
#nav .select li a:hover .sub,
#nav .select li:hover .sub {
display:block;
position:absolute;
width:1024px;
top:40px;
left:0;
background:#1D252F;
margin-top:0;
z-index:100;
color:#fff;
}
#nav .sub, #nav .sub_active {
margin:0;
padding:0;
list-style:none;
}
#nav .sub_active {display:block; position:absolute; width:1024px; top:40px; left:0; background:#1D252F; margin-top:0; padding:0; z-index:10;}
* html #nav .sub_active, * html #nav .select a:hover .sub {z-index:-1; margin-top:0; margin-top:1px;}
#nav .sub_active a {
height:40px;
text-decoration:none;
line-height:40px;
white-space:nowrap;
display:block;
float:left;
background:#1D252F;
padding:0px 10px 0px 10px;
margin:0;
font-size:12px;
Verdana, Arial, Helvetica, sans-serif;
white-space:nowrap;
border:0;
color:#ffffff;
}
#nav .select a:hover .sub li a,
#nav .select li:hover .sub li a {display:block; background:#1D252F; padding:0px 10px 0px 10px; margin:0; white-space:nowrap; border:0; color:#fff; font-size:12px;Verdana, Arial, Helvetica, sans-serif;}
/* end of menu */
