Hover-Navigation in HTML (Heike_35)

Hallöchen,

ich habe das Problem, dass ich für meine Homepage eine Navigation möchte, die einen mouse-over-Effekt beinhaltet. Zum Einen sollen die "Oberpunkte" horizontal liegen und bei einem Mouse-over die Schriftfarbe ändern. Zum Anderen soll sich beim Mouse-over eines "Oberpunktes" die Subnavi nach Art eines Drop Down-Menüs öffnen.
Dazu hatte ich zwei Codes: Der eine löste das erste Problem, der Andere das zweite Problem. Nun habe ich versucht, beide Codes zusammenzufügen.
Problem ist, dass die Subnavi nicht ausgeblendet wird und sie sich auch nicht unter die "Oberpunkte" gliedert, sondern daneben steht. ???

Ich bin für jede Hilfe dankbar.
Wichtig ist aber, dass ich nur CSS verwenden möchte. Sollte das nicht realisierbar sein, dann sagt es mir bitte

Hier der HTML-Code

<body>

<div id="navcontainer">

<ul id="navlist">
<li class="active"><a href="#" id="current">Startseite</a></li>
   <ul class="submenu">
   <li class="activesub"><a href="#"
id="currentsub">Aktuelles</a></li>
   <li><a href="#">Archiv</a></li>
   </ul>
</li>

<li class="navi"><a href="#">Über mich</a></li>
   <ul class="submenu">
   <li><a href="#">Lebenslauf</a></li>
   <li><a href="#">Interessen</a></li>
   <li><a href="#">Schulbildung</a></li>
   <li><a href="#">Zeugnisse</a></li>
   <li><a href="#">Fotogalerie</a></li>
   </ul>
</li>

<li class="navi"><a href=“#“>Proben</a></li>
   <ul class="submenu">
   <li><a href="#">Zeichnungen</a></li>
   <li><a href="#">Fotografien</a></li>
   <li><a href="#">Grafiken</a></li>
   <li><a href="#">Publikationen</a></li>
   <li><a href="#">Photoshop</a></li>
   </ul>
</li>

<li class="navi"><a href="#">Kontakt</a></li>

<li class="navi"><a href="#">Gästebuch</a></li>

</div>

</body>

Hier der CSS-Code

#navcontainer
{
margin: 0;
padding: 5px 0 7px 5px;
width: 50%;
line-height: 1.75;
background-color: #800000;
font-family: Arial, sans-serif;
font-size: 90%;
}

ul#navlist
{
display: inline;
list-style: none;
}
ul#navlist li
{
float: left;
width: auto;
margin-right: 5px;
border: 2px solid #fff;
background-color: #ddd;
}

ul#navlist li a
{
padding: 0 0 0 10px;
line-height: 1.75;
text-decoration: none;
color: #999;
}

ul#navlist li a#current
{
font-weight: bold;
color: #800000;
}

ul#navlist li a:hover, ul#navlist a#current:hover
{
font-weight: lighter;
color: #800000;
}

ul#navlist li a:active, ul#navlist li#active a#current:active
{
color: #800000;
}

ul#submenu
{
display:none;
top: 15px;
height: 15px;
left: 5px;
padding-top: 7px
}

li#navi:hover ul#submenu
{
display:inline;
position:absolute;
z-index:2;
margin-left:1px;
}

.navi:hover .submenu li
{
display:inline;
background-color:#6699FF;
border:#66FFFF 1px dotted;
list-style-position:outside;
}

« Delphi Taschenrechner		Windows 7: Virtual Basic hilfe,.... »

Hover-Navigation in HTML

Mehr zu Hover-Navigation in HTML