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"):
Hier der HTML Code
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"):
HTML:
#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
HTML:
<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>
Zuletzt bearbeitet von einem Moderator: