HTML-PHP-Java-Perl Hilfe beim formatieren einer verschaltelten Liste

[xphzy]

Liebes Forum,

ich benötige nun mal in anderer Sache Hilfe. Ich habe eine Navigation (horizontal) und eine Subnavi zur 2 der 3 Punkten. Nun möchte ich mit css das <li> der Hauptpunkte (Punkt1, Punkt2 und Punkt3) formatieren, ohne die bestehende Formatierung der unteren <li> (sub-menu) "anzugreifen". Leider gelingt mir das nicht, da immer automatisch auch die <li>-Elemente des sub-menus mit einbezogen werden.
Was mache ich falsch?


CSS (nur der "Hauptpunkte"):

Spoiler

#menu123 li.menu-item-2865  {
font-size: 19px;
line-height: 70px;
background: #a2c037;
margin: 0;
width: 20%;
text-align: center;
}
#menu123 li.menu-item-2964 {
font-size: 19px;
line-height: 70px;
background: #74cee4;
margin: 0;
width: 20%;
text-align: center;

}
#menu123 li.menu-item-2965 {
font-size: 19px;
line-height: 70px;
background: #edbf47;
margin: 0;
width: 20%;
text-align: center;
}

#menu123-2867 {
font-size: 19px;
line-height: 70px;
background: #ec774b;
margin: 0;
width: 20%;
text-align: center;
}
#menu-schule li.menu-item-2940 {
font-size: 19px;
line-height: 70px;
background: #98c2a9;
margin: 0;
width: 20%;
text-align: center;
}

Hier der HTML Code

Spoiler

<ul id="menu123" class="menu">
 
    <li id="menu-item-2865" class="menu-item menu-item-2865"><a href="#"><span>Punkt1</span></a></li>
 
    <li id="menu-item-2964" class="menu-item menu-item-2964"><a href="#"><span>Punkt2</span></a>
        <ul class="sub-menu" style="display: none;">
            <li id="menu-item-2875" class="menu-item menu-item-2875"><a href="#">Unterpunkt1</a></li>
            <li id="menu-item-2874" class="menu-item menu-item-2874"><a href="#">Unterpunkt2</a></li>
            <li id="menu-item-2887" class="menu-item menu-item-2887"><a href="#">Unterpunkt3</a></li>
            <li id="menu-item-2886" class="menu-item menu-item-2886"><a href="#">Unterpunkt4</a></li>
            <li id="menu-item-2885" class="menu-item menu-item-2885"><a href="#">Unterpunkt5</a></li>
            <li id="menu-item-2884" class="menu-item menu-item-2884"><a href="#">Unterpunkt6</a></li>
        </ul>
    </li>

    <li id="menu-item-2965" class="menu-item menu-item-2965"><a href="#"><span>Punkt3</span></a>
        <ul class="sub-menu" style="display: none;">
   
            <li id="menu-item-2901" class="menu-item menu-item-2901"><a href="#">Unterpunkt6</a></li>
       
            <li id="menu-item-2900" class="menu-item menu-item-2900"><a href="#">Unterpunkt6</a></li>
       
            <li id="menu-item-2899" class="menu-item menu-item-2901"><a href="#">Unterpunkt6</a></li>
        </ul>
    </li>
 
</ul>

 

[Phantom]

Nehme mal menu123aus dein CSS. Persönlich teste ich so etwas zuvor mit dem -FF Entwickler tool. Da hast du rechts die CSS Eigenschaften. Formatiere dort bis es passt und kopiere dann alles in deiner CSS Datei. Gut ist das du dort Markierung setzen kannst wo du siehst wo der befehl überall angewendet wird.

 

[xphzy]

Ja ich teste es zwar nicht in FF aber auf meinem eigenen Rechner. Das Menu ist ein fertiges aus Wordpress, nur möchte ich es gerne an meine Ansprüche anpassen. D.h. nur die Hauptbuttons ändern. Leider kommt es auf das Selbe raus, wenn ich #menu123 aus der CSS nehme. Die Formatierung wird auch auf das Submenu angewendet

 

[Phantom]

CSS ist leider immer so eine sache. Oft muss auch ein anderer befehlt als wichtiger überschrieben werden. Optiml siehst du das wie gesagt im Firefox Browser.

Hier ein beispiel

Du musst Regestriert sein, um das angehängte Bild zusehen.

 

[xphzy]

Danke für deine Mühe. Allerdings ist es mir keine Hilfe