Sponsor-Board.de

Guten Abend,

ich suche nach einer Möglichkeit, um die CSS Attribute last-child und a:hover zu kombinieren, sprich dass z.B. für den letzten Listenpunkt gilt, dass er eine andere Hintergrundfarbe bekommt bei Mouseover, als die anderen.

MfG

ohne deine genaue Struktur zu kennen, vllt : ul li:last-child a:hover ?

Jop so würde ich es auch machen Wink

Danke, so hat es geklappt, fragt sich nur wieso ich nicht darauf gekommen bin ^^.
Jetzt stellt sich mir ein weiteres Problem...

Code:

nav {

    margin: auto; 

    text-align: center;

    z-index: 5;

}

nav ul ul {

    display: none;

}

    nav ul li:hover > ul {

        display: block;

    }

nav ul {  

    list-style: none;

    position: relative;

    display: inline-table;

}

    nav ul:after {

        content: ""; clear: both; display: block;

    }

    nav ul li {

        float: left;

    }

            nav ul li:hover a {

                color: #fff;

            }

        nav ul li a {

            display: block; padding: 0px 0px;

            color: white; text-decoration: none;

        }

    nav ul ul {

        background:#003668 ; border-radius: 10px; padding-top: 14px;

        position: absolute; top: 100%;

    }

        nav ul ul li {

            float: none; 

            border-top: 1px solid #06C;

            border-bottom: 1px solid #06C; position: relative;

        }

        nav ul ul li a:hover {

            background: #034683;

            text-decoration:none;        

        }

        nav ul ul li:last-child {

            border-bottom: none;

        }

            nav ul ul li a {

                padding: 15px 40px;

                color: #fff;

            }    

                nav ul ul li:last-child a:hover {

                    background: #034683;

                    text-decoration:none;

                    -webkit-border-bottom-right-radius: 10px;

                    -webkit-border-bottom-left-radius: 10px;

                    -moz-border-radius-bottomright: 10px;

                    -moz-border-radius-bottomleft: 10px;

                    border-bottom-right-radius: 10px;

                    border-bottom-left-radius: 10px;

                }

    nav ul ul ul {

        position: absolute; left: 100%; top:0;

        margin-top: -16px;

    }

    nav ul ul ul li {

        overflow:hidden;

    }

    nav ul ul ul li a:hover {

        border-radius: 0px;

    }

    nav ul ul ul li:first-child {

        border-top: 2px solid #06C;

    }

Das ist mein CSS-Part, und das mein HTML:

Code:

<nav>

    <ul>

        <li><a href="#">Home</a></li>

        <li><div style="width:20px;">&nbsp;</div></li>

        <li><a href="#">Tutorials</a>

            <ul>

                <li><a href="#">Linux</a></li>

                <li><a href="#">Windows</a>

                <ul>

                        <li><a href="#">HTML</a></li>

                        <li><a href="#">CSS</a></li>

                        <li><a href="#">PHP</a></li>

                    </ul>

                </li>

                <li><a href="#">awdawdawdawdwadawdawdawd</a>

                    <ul>

                        <li><a href="#">HTML</a></li>

                        <li><a href="#">CSS</a></li>

                        <li><a href="#">PHP</a></li>

                    </ul>

                </li>

            </ul>

        </li>

        <li><div style="width:20px;">&nbsp;</div></li>

        <li><a href="#">Mitglieder</a>

            <ul>

                <li><a href="#">Autoren</a></li>

                <li><a href="#">Alle Mitlgieder</a></li>

            </ul>

        </li>

        <li><div style="width:20px;">&nbsp;</div></li>

        <li><a href="#">Videos</a></li>

        <li><div style="width:20px;">&nbsp;</div></li>

        <li><a href="#">Hilfe</a></li>

        <li><div style="width:20px;">&nbsp;</div></li>

        <li><a href="#">Team</a></li>

        <li><div style="width:20px;">&nbsp;</div></li>

        <li><a href="#">Sponsoren</a></li>

        <li><div style="width:20px;">&nbsp;</div></li>

        <li><a href="#">Partner</a></li>

        <li><div style="width:20px;">&nbsp;</div></li>

        <li><a href="#">&Uuml;ber uns</a></li>

        <li><div style="width:20px;">&nbsp;</div></li>

        <li><a href="#">Banner</a></li>

        <li><div style="width:20px;">&nbsp;</div></li>

        <li><a href="#">Impressum</a></li>

    </ul>

</nav>

Leider passiert dann das hier:

http://s1.directupload.net/images/121125/idls4vvv.png(!https)

Bei den Menüpunkten HTML und CSS werden ebenfalls die Ecken abgerundet, was allerdings nur beim untersten so sein soll.
Wie kann ich diesen Fehler beheben?

MfG

pushmessage

Mr-Trust

Aaron

moser96

Mr-Trust

push