XHTMLforum

XHTMLforum (http://xhtmlforum.de/index.php)
-   CSS (http://xhtmlforum.de/forumdisplay.php?f=73)
-   -   Menu Formatierung funktioniert nur teilweise (http://xhtmlforum.de/showthread.php?t=55034)

cb01 20.12.2008 14:38

Menu Formatierung funktioniert nur teilweise
 
Hi,

ich habe ein aufklapp Menü bestehend aus verschachtelten Listen

HTML-Code:

<html>
<head>
        <title>Testseite</title>
        <style type="text/css">
                #flexi-pages-1 {
                        margin-top: -10px !important;
                        margin-top: 0px;
                }

                #menu ul {
                        padding-left: 0px;
                }

                #menu ul li {
                        list-style-type:none;
                        line-height: 20px;
                }

                #menu ul ul li, #menu ul ol li {
                        margin: 0px 0 0;
                        padding: 0;
                }

                #menu a {
                        display: block;
                        line-height: 20px;
                        padding-left: 35px;
                        width: 153px;
                        font-size:11px;
                        font-weight:500;
                        color:#666666;
                        background:#ddd4c6 url('http://localhost/img/menu_arrow.gif') no-repeat left center;
                        border-bottom: 1px solid white;
                        text-decoration: none;
                }

                .parent  li ul li a {
                        display: block;
                        line-height: 20px;
                        width: 188px;
                        color: black;
                        background-color: #000;
                }

                .parent li {
                margin-left: -10px;
                width: 188px;
                list-style-type: none;
                list-style-image: none;
                }

                .parent {
                        text-decoration: none;
                        width: 148px;
                        padding-left: 0px;
                }

                .parent ul {
                        width: 188px;
                        margin-left: 0px !important;
                        margin-left: 0px;
                }

                .topmenu a:hover
                {
                        color:#ffffff;
                        text-decoration:none;
                }
        </style>
</head>
<body>
<div id="menu" style="width: 10px;">
        <ul>
                <li id="flexi-pages-1" class="widget flexipages_widget"><ul class="parent">
                <li class="page_item page-item-78"><a href="http://localhost/wordpress/modellubersicht" title="Modellübersicht">Modellübersicht</a></li>
                <li class="page_item page-item-2"><a href="http://localhost/wordpress/about" title="Gebrauchtwagen">Gebrauchtwagen</a></li>
                <li class="page_item page-item-22 current_page_ancestor current_page_parent"><a href="http://localhost/wordpress/kundenservice" title="Kundenservice">Kundenservice</a>
                <ul>
                        <li class="page_item page-item-24"><a href="http://localhost/wordpress/kundenservice/werkstatt" title="Werkstatt">Werkstatt</a></li>
                        <li class="page_item page-item-26 current_page_item"><a href="http://localhost/wordpress/kundenservice/finanzierung" title="Finanzierung">Finanzierung</a></li>
                        <li class="page_item page-item-28"><a href="http://localhost/wordpress/kundenservice/versicherung" title="Versicherung">Versicherung</a></li>

                        <li class="page_item page-item-30"><a href="http://localhost/wordpress/kundenservice/newsletter-2" title="Newsletter">Newsletter</a></li>
                </ul>
                </li>
                <li class="page_item page-item-36"><a href="http://localhost/wordpress/unternehmensinfos" title="Unternehmensinfos">Unternehmensinfos</a></li>
                <li class="page_item page-item-42"><a href="http://localhost/wordpress/kontaktformular" title="Kontakt">Kontakt</a></li>
                <li class="page_item page-item-50"><a href="http://localhost/wordpress/downloads" title="Downloads">Downloads</a></li>
                </ul>
                </li>
        </ul>
</div>
</body>
</html>

Nun habe ich das Problem, das ich diesen Teil des Menüs

HTML-Code:

<li class="page_item page-item-22 current_page_ancestor current_page_parent"><a href="http://localhost/wordpress/kundenservice" title="Kundenservice">Kundenservice</a>
                <ul>
                        <li class="page_item page-item-24"><a href="http://localhost/wordpress/kundenservice/werkstatt" title="Werkstatt">Werkstatt</a></li>
                        <li class="page_item page-item-26 current_page_item"><a href="http://localhost/wordpress/kundenservice/finanzierung" title="Finanzierung">Finanzierung</a></li>
                        <li class="page_item page-item-28"><a href="http://localhost/wordpress/kundenservice/versicherung" title="Versicherung">Versicherung</a></li>

                        <li class="page_item page-item-30"><a href="http://localhost/wordpress/kundenservice/newsletter-2" title="Newsletter">Newsletter</a></li>
                </ul>
                </li>

nur teilweise Stylen kann, so funktionieren zum Beispiel width und display: block ohne probleme aber zum Beispiel den Hintergrund bekomme ich nicht geändert.

Hier nochmal der Teil des CSS das mir die Unterliste anpassen soll

HTML-Code:

.parent  li ul li a {
        display: block;
        line-height: 20px;
        width: 188px;
        color: black;
        background-color: #000;
}

Wäre super wenn jemand einen Tipp hätte wo mein Problem liegt.

Grüße

Chris


Alle Zeitangaben in WEZ +2. Es ist jetzt 02:00 Uhr.

Powered by vBulletin® Version 3.8.11 (Deutsch)
Copyright ©2000 - 2021, vBulletin Solutions, Inc.

© Dirk H. 2003 - 2020