Overeffekte wollen nicht

  • Hallo Forumuser,

    ich würde gerne wieder einmal euren freundlichen Rat haben.

    Bin immer noch totaler Anfänger und will wie im Anhang zu sehen eine CSS Navi bauen. Ich kriege aber die Mouseover Effekte nicht hin.

    Beim a:hover wird die Navi nicht von der vorhergehenden Klasse übernommen und lässt sich auch sonst nicht dazu zu bewegen, beim Mouseover die Farbe so zu wechseln, das der gesamte Button die Farbe wechselt.
    Mit "display:block funzt es irgendwie nicht in meinem Code.

    Vielleicht kann mir jemand sagen, wo in meinem Code der Wurm ist?!


    Hier mal die Site:

    Hier mal der CSS-Code:

    #navi ul li {
    display: block;
    text-decoration: none;
    color: #FCF;
    list-style-type: none;
    background-color: #9f5d9d;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.75em;
    line-height: 2.4em;
    text-align: right;
    padding-right: 10px;
    margin-left: 9px;
    border-bottom-style: solid;
    border-bottom-color: #C69;
    border-bottom-width: 1px;
    }

    #navi a {
    text-decoration: none;
    color: #FCF;
    }

    #navi a:link {
    color:#FFC;
    }

    #navi a:hover {
    background-color:#F60;
    color:#C00;
    }

  • Ich kenne zwar deinen HTML Code nicht aber das hier funktioniert:

    HTML
    <div id="navi">
    <ul>
       <li><a href="#">Link 1</a></li>
       <li><a href="#">Link 2</a></li>
       <li><a href="#">Link 3</a></li>
       <li><a href="#">Link 4</a></li>
       <li><a href="#">Link 5</a></li>
    </ul>
    </div>


    CSS Code

  • Danke Macrodesign,

    ich habe ihn gerade ausprobiert. Der funktioniert. Ich werde diese Navi jetzt anpassen und in meine Site einbauen.
    Ich habe mir auch schon überlegt, eine externe Musternavi zu bauen um das mal total zu begreifen.

    Herzlichen Dank an alle erstmal, die mir hier geholfen haben.
    Premker