Computerhilfen.de Logo
Forum
Tipps
News
Frage stellen

Hover-Navigation in HTML

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 TaschenrechnerWindows 7: Virtual Basic hilfe,.... »
 

Schnelle Hilfe: Hier nach ähnlichen Fragen und passenden Tipps suchen!

Fremdwörter? Erklärungen im Lexikon!
Scart
SCART, ein europäischer Standard für Steckverbindungen, spielte eine wichtige Rolle in der Geschichte der Audio- und Videotechnik. Ursprünglich konzipiert,...

CSS
CSS ist die Abkürzung für Cascading Style Sheets, eine Beschreibungssprache im Internets, die für die visuelle Gestaltung von Webseiten verantwortlich ist....