M
Maik
re: Animiertes Menü
Und ich sage dir, das erste Submenü wird sehr wohl angezeigt, nur liegt es unter dem Zweiten, und ist durch die Hintergrundfarben verdeckt.
Überzeuge dich mit diesem Stylesheet, in dem ich alle Angaben zur Hintergrundfarbe auskommentiert habe:
Das zweite Submenü lässt sich mit der CSS-Eigenschaft display:none ausblenden.
Zudem muß eine ID in einem Dokument eindeutig sein, d.h. sie darf darin nur einmal vergeben / verwendet werden.
Und ich sage dir, das erste Submenü wird sehr wohl angezeigt, nur liegt es unter dem Zweiten, und ist durch die Hintergrundfarben verdeckt.
Überzeuge dich mit diesem Stylesheet, in dem ich alle Angaben zur Hintergrundfarbe auskommentiert habe:
Code:
/* CSS Document */
#navcontainer { }
#navcontainer a { text-decoration: none;
font-family:Verdana, Arial, Helvetica, sans-serif;}
#navcontainer ul
{
padding: 0;
margin: 0;
list-style-type: none;
position: relative;
}
#navcontainer li { display: inline; }
/*1st level elements*/
#navcontainer ul
{
border-top: 0px solid #36c;
border-bottom: 1px solid #000000;
/*background-color:#666666;*/
padding: 1px 0;
margin-bottom: 0em;
}
#navcontainer li { margin: 0 0 0px; }
#navcontainer ul a,
#navcontainer ul a:link,
#navcontainer ul a:visited
{
/*background-color: #666666;*/
border: 0px solid #000000;
color: #000;
padding: 0px 5px;
font-size:13px;
}
#navcontainer ul a:hover,
#navcontainer ul a:focus
{
/*background-color:#950000;*/
border: 0px solid black;
color: #000;
}
/*current Link*/
#navcontainer ul a#current,
#navcontainer ul a#current:link,
#navcontainer ul a#current:visited { font-weight: bold; }
/*Second and subsequent levels*/
#navcontainer ul ul
{
font-size: 80%;
position: absolute;
top: 19px;
left: 0;
width: 100%;
border-top: none;
/*background-color:#950000;*/
}
#navcontainer ul ul li { display: inline; }
#navcontainer ul ul a,
#navcontainer ul ul a:link,
#navcontainer ul ul a:visited
{
/*background-color:#950000;*/
border: 0px solid #95b1bb;
color: #000;
}
#navcontainer ul ul a:hover,
#navcontainer ul ul a:focus
{
/*background-color:#950000;*/
border: 0px solid black;
color: #000;
}
/*current Link*/
#navcontainer ul ul a#subcurrent,
#navcontainer ul ul a#subcurrent:link,
#navcontainer ul ul a#subcurrent:visited { font-weight: bold; }Das zweite Submenü lässt sich mit der CSS-Eigenschaft display:none ausblenden.
Zudem muß eine ID in einem Dokument eindeutig sein, d.h. sie darf darin nur einmal vergeben / verwendet werden.
Code:
<div id="navcontainer">
<ul id="navlist">
<li id="active"><a href="#" id="current">Aktuelles</a>
<ul>
<li id="subactive"><a href="#" id="subcurrent">News</a></li>
<li><a href="#">Termine</a></li>
<li><a href="#">FTC Huus</a></li>
</ul>
</li>
<li><a href="#">Fussball</a>
<ul style="display:none;">
<li><a href="#">I.Herren</a></li>
<li><a href="#">II.Herren</a></li>
<li><a href="#">A-Jgd</a></li>
<li><a href="#">B-Jgd</a></li>
<li><a href="#">C-Jgd</a></li>
<li><a href="#">D-Jgd</a></li>
<li><a href="#">E-Jgd</a></li>
<li><a href="#">F-Jgd</a></li>
<li><a href="#">G-Jgd</a></li>
</ul>
</li>
</ul>
</div>
